Simple Text Only Tooltip using JQuery

A tooltip is the text that is displayed when an image, link or text, such as a title, is hovered over with a cursor. It is fairly simple to create CSS tooltips which are commonly used in web design and mostly done with javascript frameworks.

Basic tooltips can be created with only a few lines of CSS and jQuery Code.

By providing a title attribute, a standard tooltip will be displayed in all browsers, but in this tutorial we are going to learn how to create a customised tooltip that will give you more control over it's design, functionality and appearance.

HTML

A tooltip needs two things, the attribute class="Tooltip" to launch the tooltip itself, and the title attribute which will contain the text to be displayed when hovered over.

<a href="#" title="This is the tooltip text" class="tooltip">Your Link</a>
<p title="This is the tooltip text" class="tooltip">Hover me to view tooltip</p>
<img src="image.jpg" class="tooltip" title="This is the tooltip text">

CSS

Using CSS, you can customise the style of the tooltip including the colour, shape and whether or not you want the box to have a border or shadow.

.wy-tooltip {
	border: 1px solid #F1D031;
	color: #444;
	background: #FFFFA3;
	box-shadow: 0 2px 3px #999;
	position: absolute;
	padding: 5px;
	text-align: left;
	border-radius: 5px;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
}
.wy-hide { display: none; }

JQUERY

Copy and Paste the following code in the head section of your page to call the JQuery file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then after the JQuery call above, use the following code which will define the main functionality of the tooltip:

<script type="text/javascript">
$(document).ready(function() {
 var Delay = 500, ToolTipTimer
 $('.tooltip').hover(function(e){
	var title = $(this).attr('title');
	$(this).data('ToolTipText', title).removeAttr('title');
	$('<div class="wy-tooltip wy-hide">').text(title).appendTo('body');
	ToolTipTimer  = setTimeout(function(e) {
		$('.wy-tooltip').removeClass('wy-hide').fadeIn('fast');
	 },Delay);
 }, function() {
	clearTimeout(ToolTipTimer);
	$(this).attr('title', $(this).data('ToolTipText'));
	$('.wy-tooltip').remove();
 }).mousemove(function(e) {
	var pLeft;
	var pTop;
	var offset = 10;
	var CursorX = e.pageX;
	var CursorY = e.pageY;
	var WindowWidth = $(window).width();
	var WindowHeight = $(window).height();
	var toolTip = $('.wy-tooltip');
	var TTWidth = toolTip.width();
	var TTHeight = toolTip.height();			
	if (CursorX-offset >= (WindowWidth/4)*3) {
		pLeft = CursorX - TTWidth - offset;
	} else {
		pLeft = CursorX + offset;
	}
	if (CursorY-offset >= (WindowHeight/4)*3) {
		pTop = CursorY - TTHeight - offset;
	} else {
		pTop = CursorY + offset;
	}
	$('.wy-tooltip').css({ top: pTop, left: pLeft })			
 });
});
</script>

HOW IT WORKS

This simply works by getting the text to be used for our tooltip from the title attribute. Then by removing the title attribute, so that the standard browser tooltip is not displayed. Dynamically a div is created, with the text from the title attribute, then appended to the body tag which has a class="wy-tooltip" to control the design aspect of the tooltip using CSS.

Finally on mouse out we must put the title attribute back where it belongs with our tooltip text.

To control the timing we have used the class="wy-hide" which hides the div until the wy-hide is removed by using the JQuery function removeClass and using fadeIn tooltip displays.

To determine the position of the tooltip, we have used the mouse cursor position coordinates. Whether to show the tooltip on the right or left side of the cursor is calculated by using the size of the window and cursor position.

CONCLUSION

We can use JQuery as an easy way to replace the standard tooltip with a customised one with an appearance and functionality that will fit in more with our design requirements.