Replace title-tag with jQuery-tooltips — Nov 13, 2012, 11:05 pm
Those who want to make the standard title-tooltips more beautiful, can use the following script with the help of jQuery. It finds the position of a link on a page and expands a tooltip below it (centered). A timeout prevents an up and down jumping of the slide-effect. By changing $("a").hover() to i.e. $(".myclass").hover() you can set when the effect is used.var myTimeout = null;
var tmpTitle = '';
function hideTooltip() {
$("#tooltip").slideUp();
}
$(document).ready(function () {
$("body").append('<div id="tooltip"></div>');
$("a").hover(function () {
tmpTitle = this.title;
var offset = $(this).offset();
$("#tooltip").slideDown();
window.clearTimeout(myTimeout);
var y = offset.top+this.height;
var x = offset.left+this.width/2-document.getElementById('tooltip').width/2;
$("#tooltip").html(tmpTitle).offset({ top: y, left: x });
this.title = '';
}, function () {
myTimeout = window.setTimeout("hideTooltip()", 1000);
this.title = tmpTitle;
});
});Don't forget to define #tooltip in CSS:
#tooltip {
position: absolute;
display: none;
width: 100px;
background-color: blue;
color: white;
}