DotNetStories
Creating tooltips using JQuery
I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development.
You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on how to create a stylish tooltip using JQuery.
In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.
We need to download the latest version of JQuery. You can
download it
here.
We will need some markup first.This is the sample HTML 5 page
Type or (copy paste) the markup in your favorite HTML editor
(VS, Expression Web,Notepad++)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Liverpool
Legends</title>
<script
type="text/javascript"
src="jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<script
type="text/javascript"
src="tooltip.js"></script>
</head>
<body>
<header>
<h1>Liverpool Legends</h1>
</header>
<div
id="main">
<a
class="liverpool"
href="http://en.wikipedia.org/wiki/John_Barnes_%28footballer%29"
target="_blank" Tooltip="One of the greatest midfielders
to wear the Liverpool shirt">John Barnes</a>
<br/>
<a
class="liverpool"
href="http://en.wikipedia.org/wiki/Kenny_Dalglish"
target="_blank" Tooltip="The greatest ever player that
has played for Liverpool">Kenny Dalglish</a>
<br/>
<a
class="liverpool"
href="http://en.wikipedia.org/wiki/Steven_Gerrard"
target="_blank" Tooltip="A liverpool legend and the
captain of the team">Steven Gerrard</a>
</div>
<footer>
<p>All Rights
Reserved</p>
</footer>
</body>
</html>
I have some links in this simple html page. When I hover over the links I want the the contents of the Tooltip attribute to appear on the right of the links as a tooltip. When I mouse out of the links then the tooltip contents should disappear.
I am including a link to the JQuery library in the
head section of the HTML markup.
I will also include the external .css stylesheet file with
the various styles for the HTML elements in the
head section.
You must create another file first e.g
mystyle.css and
copy-paste in it the code below
body
{
background-color:#efefef;
}
header
{
font-family:Tahoma;
font-size:1.3em;
color:#505050;
text-align:center;
}
a:link
{color:#64000; text-decoration:none;}
a:hover {color:#FF704D;
text-decoration:none;}
.tooltip {
display: none;
font-size: 12pt;
position: absolute;
border: 2px solid #000000;
background-color: #b13c3c;
padding: 12px 16px;
color: #fff347;
}
footer
{
background-color:#999;
width:100%;
text-align:center;
font-size:1.1em;
color:#002233;
}
Have a look at the class tooltip above.
I have also included a link to the external .js javascript script (tooltip.js) file with the various styles for the HTML elements in the head section.
Type (copy-paste the following) javascript code in the tooltip.js
$(function() {
$('.liverpool').hover(function(event) {
var
toolTipcontents = $(this).attr('Tooltip');
$('<p
class="tooltip"></p>').text(toolTipcontents)
.appendTo('#main')
.css('top',
(event.pageY - 40) + 'px')
.css('left',
(event.pageX + 60) + 'px')
.fadeIn(4000);
}, function() {
$('.tooltip').remove();
}).mousemove(function(event) {
$('.tooltip')
.css('top', (event.pageY - 40)
+ 'px')
.css('left', (event.pageX + 60) +
'px');
});
});
Let me explain what I am doing with the code
above.
- First I make sure that DOM has loaded before I do anything else.
- Then in the hover over event, I store in the variable toolTipcontents the contents of the Tooltip attribute.Have a look here for the attr() function.
-
Then I create a p tag dynamically and assign
the contents of the toolTipcontents variable to
it.Have a look
here
for the text() function.
- Then I simply append this p tag to the main div of the page and then set the position (top,left) that the tooltip will appear.Have a look here for the appendTo() function. Also have a look here for the css() function.
- Then I use an effect to make the tooltip contents appear with a simple fading. .Have a look here for the fadeIn() function.
- Then in the hover out event I simply remove the p tag.Have a look here for the remove() function.
- Finally because I want the tooltip contents to move along as the mouse moves I add some code to the mousemove() event. Have a look here for the mousemove() event.
Make sure you view your page in you browser of
preference.
Have a look at the picture below to see what I see when I view this page on the browser and hover over a link.
Hope it helps !!!