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; }