Imitating browsers default tooltip

Tooltips demo 3 / 7 : Imitating browsers default tooltip

The first two images show the browser's default tooltip and the last two show the jQuery Tools tooltip. We are trying to mimic the standard browser behaviour.

So what is the point of all this? First of all we have a similar syntax for enabling both of the tips. Browsers without JavaScript enabled will always see the default tooltip. Secondly, the browser's tooltip is not always the best one. Here are the main benefits of the jQuery Tools tooltip which cannot be achieved with the browser's default tooltip:

• Appearance and dimensions can be tweaked.
• The tooltip can contain any HTML element.
• You have a full control over the positioning.
• You can move the cursor on top of the tooltip so you can use links or forms inside of them.
• You can control the delay in showing or hiding the tooltip before and after your mouse moves over the trigger element.
• You can change the show/hide effect.
• Everything is scriptable and you can even make your own tooltip plugins.

HTML / CSS coding

Our HTML structure is identical to the basic setup. Here we have a single tooltip element and here is how it has been styled:

.tooltip {
	display:none;
	background-color:#ffa;
	border:1px solid #cc9;
	padding:3px;
	font-size:13px;
	-moz-box-shadow: 2px 2px 11px #666;
	-webkit-box-shadow: 2px 2px 11px #666;
}

Note that we are using a drop shadow for the latest browsers, i.e. the latest versions of Firefox, Safari, Konqueror and Chrome.

JavaScript coding

A single JavaScript call initializes the tooltip. The configuration options are commented:

$("img[title]:gt(1)").tooltip({

		// use div.tooltip as our tooltip
		tip: '.tooltip',

		// use fade effect instead of the default
		effect: 'fade',

		// make fadeOutSpeed similar to browser's default
		fadeOutSpeed: 100,

		// the time before tooltip is shown
		predelay: 400,

		// tweak the position
		position: "bottom right",		
		offset: [-50, -80]
	});

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual.