If you need a simple way to replace the anchor’s ( <a href=”” ></a> ), title=”” attribute with a nice customizable tooltip, below is the code and a demo.
The script adds a html <div> at the end of the <body> tag, and as you hover the specified elements it get’s the title attribute and include it in the <div id=”tooltip”>, the last part of the script is what makes the tooltip move along with mouse cursor.
The nice part is that you can make your tooltip look however you want with CSS.
<ul id="links"> <li> <a href="#" title="This is one">One</a> </li> <li> <a href="#" title="This is two">Two</a> </li> <li> <a href="#" title="This is three">Three</a> </li> <li> <a href="#" title="This is four">Four</a> </li> <li> <a href="#" title="This is five">Five</a> </li> </ul>
#tooltip {
padding: 10px 15px;
position: absolute;
font-size: 14px;
color: #4E4E4E;
background: #C4E424;
z-index: 10;
}
(function($){
$('body').append('<div id="tooltip"></div>');
$('#tooltip').hide();
var $tooltip = $('#tooltip');
$('ul#links a').each(function(){
var $this = $(this),
$title = this.title;
$this.hover(function(){
this.title = '';
$tooltip.text($title).show();
}, function(){
this.title = $title;
$tooltip.text('').hide();
});
$this.mousemove(function(e){
$tooltip.css({
top: e.pageY - 10,
left: e.pageX + 20
});
});
});
})(jQuery);
Here is a demo
Leave a Reply