Script:
//append tooltip
jQuery('li .helptext').hover(function(){
// Hover over code
var title = $(this).attr('alt');
jQuery('
').text(title).appendTo('body').fadeIn('slow');
').text(title).appendTo('body').fadeIn('slow');
}, function() {
// alert('test');
// Hover out code
jQuery('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
jQuery('.tooltip')
.css({ top: mousey, left: mousex })
});
//tooltip end
CSS:
.tooltip {
height:50px;
color:#fff;
position:absolute;
border:1px solid #333;
background:#333;
border-radius:5px;
padding:10px;
font-size:12px;
width: 250px;
z-index: 999999;
opacity: 1 !important;
}
.helptext {cursor:help;}
Note:
Update selector name based on your class or id names.
Note:
Update selector name based on your class or id names.
