jQuery: A simple Tooltip

Here, I will show you how to show tooltip with jQuery. It’s very simple and easy.

I have a href link. I will show you, how to show tooltip when you hover your mouse over the link. The title of the href link will be shown as tooltip.

View Demo || Download Code

In the demo, I have kept two links. One without tooltip and the other with tooltip.

<h2>Tooltip</h2>
<a href="#" title="Save Earth and Be Happy!">Save the planet Earth</a><br/> (only with title but No tooltip)<br/><br/>
<a class="tooltip" href="#" title="Save Earth and Be Happy!">Save the planet Earth</a><br/> (with tooltip)<br/><br/>
<p id="tip"></p>

Tooltip is shown when the link is hovered. The title of the href link is shown as tooltip. The tooltip position is set with e.PageY and e.PageX. The tooltip is shown slowly with fadeIn(“slow”). And the tooltip is made hidden with fadeOut(“fast”) when we don’t hover over the link or move the cursor away from the link.

$(function(){
	var tip = $("#tip");

	$("a.tooltip").hover(function(e){

		// assign the <a> title to tip
		tip.text($(this).attr("title"));

		// empty <a> title
		$(this).attr("title", "");

		// set the position of tooltip and then display it
		tip.css("top",(e.pageY+5)+"px")
		   .css("left",(e.pageX+5)+"px")
		   .fadeIn("slow");

	}, function(){

		// hide tooltip
		$("#tip").fadeOut("fast");

		// set the <a> title with tootip content
		$(this).attr("title", tip.html());
	});
});

View Demo || Download Code

Thanks.