Show the title of <a> link in a div not in a tool tip

Question

How i can show the title of this

<a href="www.google.com" 
  title="google"
  onclick="search.php" 
  target="_blank">google</a>

on mouse on, I want show it in a div and not in the basic tooltip how?

I think its easy to show but i dont know how to hide the original browser tooltip

Is there a way to do this in JavaScript, or in jQuery?

Answer 1

I've used a JQUERY plugin called "qTip" before which was very customizeable. the below applies to any anchor with a class of "qtip", and displays the content of title in a styled div.

See http://craigsworks.com/projects/qtip/

(no affiliation) but it's one of the better tooltip plugins I've come across imo.

$('a[title].qtip').qtip({ 
    style: { name: 'light', tip: true },
    position: {
    corner: {
        target: 'center',
        tooltip: 'center'
        }
    }   
})

Answer 2

For help on hiding the title though check out this other discussion:

http://stackoverflow.com/questions/1299772/jquery-hide-native-tooltip-resolved

To make the title text appear in a div do this:

HTML:

<div id='titleText'></div>
<a href='#' title='title text' class='noTitle'>link</a>

JS:

$(".noTitle").hover(function() {
var thisTitle = $(this).attr("title");
$(this).removeAttr("title");
$("#titleText").html(thisTitle);
},
function() {
var replaceTitle = $("#titleText").html();
$(this).attr("title",replaceTitle);
$("#titleText").html("");
});

Haven't tried it but something like this should work for you.It should get the title on hover, add it to the div and remove title attribute. Then add back the title attribute with the div text when you hover out.

Answer 3

Sorry I missunderstood your question... Try this:

HTML

<a href="" title="the link" id="myLink">the link</a>
<div id="innerWrapper"></div>

jquery

$(function(){
$("#myLink").mouseover(function(){
    var titleString = $("#myLink").attr("title");
    $("#innerWrapper").html("<h1>" + titleString + "</h1>");
});});

Here I used the 'mouseover' event as the 'hover' can have 2 parameters, and you only want to do something when the mouse is over the element, not when it goes away, right? But the 'hover' event will still do too, if you want to do something when the mouse goes away. I just did the basics, but you can add more stuffs as you feel appropriate.

Answer 4

You can't do this in the way you want (using only the title attribute with HTML) since proper HTML doesn't specify that the title attribute is a valid attribute for . You must use a javascript library like Ross's answer.

Answer 5

<a id="link" href="http://google.com" title="Title">link</a>
<div id="title">&nbsp;</div> ​

jquery:

$('#link').hover(function(){
    $('#title').text($('#link').attr('title'));
});

​

Like this? http://jsfiddle.net/JQyER/3/