Tooltip

Tootip is a great way to show extra information for an image, button, text field or any forms.

The code below will place the tooltip on the right side of your cursor.

HTML

<a href="#" title="home">Home</a>

CSS

.tooltips {
display:none;
position:absolute;
background-color:#111;
padding: 2px 8px;
color: #fff;
font-size: 0.9em;
}

jQuery

$('[title]').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('&lt;p class="tooltips"&gt;&lt;/p&gt;')
.text(title)
.appendTo('body')
.fadeIn('slow')
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltips').fadeOut('slow').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY - 10; //Get Y coordinates
$('.tooltips')
.css({ top: mousey, left: mousex })
});

Leave a Reply