Create Simple Jquery Tooltip

In this article am going to explain you how to create a Jquery tooltip using Jquery and CSS. Tooltip also called called as toolinfo or hint. Now a day it’s very common element in websites. Though tooltip is a small element in design, still it has a big role in user’s experience. Jquery and CSS3 made is to create a simple tooltip for our website design.

Jquery Simple Tooltip

You can view demo and download how to Create Jquery simple Tooltip below:

Live Demo Download


HTML

First create a HTML document and include the Jquery library. Copy and paste the below HTML inside the body tag. Note that we have a div having the class name of “tooltip_container”.

<p>Lorem ipsum dolor sit amet,
   <a class="tooltip" tooltip-data="This is the first Text">consectetur</a> 
   adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla   <a class="tooltip" tooltip-data="This is the second Text">Mouse hover here</a>. Excepteur sint occaecat cupidatat non proident,  sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="tooltip_container">
   Hi How r u?
</div>

CSS Styling

Now we are going to apply style for tooltip_container div.

body,html{
	font-family: 'Alef', sans-serif;
	font-size: 16px;
	color: #333;
}
.main{
	width: 800px;
	margin: 0 auto;
	font-size: 1.2em;
}
p{
	padding: 2em;
}
a{
	color:#168F9A;
	cursor: pointer;
}
#tooltip_container{
	padding: 0.6em;
	background:rgba(0,0,0,1);
	color:#CCC;
	width:180px;
	border-radius: 12px;
	font-size: 0.9em;
	position: absolute;
	display: none;
}

Tooltip Jquery:

Now we are going to write the jquery function to attach the tooltip_container div to cursor and pull the text form each anchor tag having the class of tooltip.

$(function(){
	//Call the tooltip function on mouse over of any element having
	//class of .tooltip
	$('.tooltip').mouseover(function(e){

		//Get the tooltip text
		var data=$(this).attr('tooltip-data');

		//Inject the tooltip text and Show tooltip_container div
		$('#tooltip_container').html(data).fadeIn(200);
	}).mousemove(function(e){
		//On mouse move trace the x and y axis
		// Set the position of tooltip div to cursor position
		//Set left position
		$('#tooltip_container').css('left',(e.pageX-20)+'px');

		//Set top Position
		$('#tooltip_container').css('top',(e.pageY+20)+'px');		
	}).mouseout(function(e){

		// On mouse out hide the tooltip div
		$('#tooltip_container').css('display','none').html('');
	});	
})

Bottom Line:

This is the very simple tooltip developed using HTML,CSS and Jquery. You can implement this tooltip method any html element line Heading tags, Anchor Links, Image Tag etc..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>