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;
}
Enter your comment:


  Use [code=LANGUAGE]...[/code] for highlighting (i.e. html, php, css, js)