HTML5 tooltips with jQuery
Generally, tooltips in HTML are created by using the title attribute in a tag like a link, image, etc. This way, a basic tooltip is displayed as a user hovers the mouse over that element.
Tooltips can be a nice way of providing contextual help or explaining the purpose of certain elements.
For example, when entering the password in a textbox, you may show a tooltip with password creation guidelines. For example,
In this tutorial, HTML 5 tooltips are created by using a lightweight jQuery plug-in. The plug-in name is jquery.tooltip.js which you may download from the GitHub website here.
Have a look at demos and how to set up this tooltip plug-in to be used for your project in the coming section.
A demo of tooltip HTML 5
The plug-in requires using the data attributes rather than using the title attribute for creating the HTML tooltips.
You have to use data-tooltip attribute along with data-options for specifying the direction and content of the tooltip.
Have a look at the demo where the direction is set downwards:
To use this plug-in in your web project, follow these steps.
Include the CSS file that defines tooltip’s style in the <head> section:
(Set the path according to your directory structure)
Write the markup where you want to create that tooltip. In the demo, I used a <div> tag with a CSS class:
<div>
<div class="html-tooltip-demo" data-tooltip data-options='{"direction":"down", "content": "A demo of down arrow tooltip"}'>
</div>
</div>
There, you can see the data attributes are used for creating the content along with specifying the direction.
Just include the jQuery and tooltip plug-in JS file above the </body> tag:
<script src=”http://code.jquery.com/jquery-2.2.3.min.js”></script>
<script src=”js/jquery.tooltip/jquery.tooltip.js”></script>
Download plugin JS file
CSS file
Full code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery.tooltip/jquery.tooltip.css">
<style>
.html-tooltip-demo{
display: block;
width: 400px;
height: 200px;
background: #8C0000;
padding: 10px;
margin: 80px;
}
</style>
</head>
<body>
<div>
<div class="html-tooltip-demo" data-tooltip data-options='{"direction":"down", "content": "A demo of down arrow tooltip"}'>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.tooltip/jquery.tooltip.js"></script>
</body>
</html>
A demo with left direction and title option
In this tooltip example, the direction of the arrow is set to the left along with using the content option.
Besides, the title option is also used where you may specify the heading for the tooltip.
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery.tooltip/jquery.tooltip.css">
<style>
.html-tooltip-demo{
display: block;
width: 250px;
height: 200px;
background: #9CCDCD;
padding: 10px;
margin: 80px;
}
</style>
</head>
<body>
<div>
<div class="html-tooltip-demo" data-tooltip data-options='{"direction":"left", "content": "A demo of left arrow tooltip", "title": "Tooltip demo"}'>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.tooltip/jquery.tooltip.js"></script>
</body>
</html>
A demo of jQuery tooltip in an HTML anchor tag
In this demo, the tooltip is created in an anchor tag rather than in <div> as in the above examples.
The direction is set as “top” while content and titles are also specified. You need to hover over the link to reveal it:
The markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery.tooltip/jquery.tooltip.css">
</head>
<body>
<div>A tooltip created with a link: <a href="https://jqueryui.com/" data-tooltip data-options='{"direction":"up", "content": "A demo of top arrow tooltip in a link", "title": "Tooltip in a link"}'>An HTML 5 / jQuery based tooltip demo</a><br />
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.tooltip/jquery.tooltip.js"></script>
</body>
</html>
A demo of tooltips in form fields
You may also use this plug-in for creating the tooltips in the form fields like textboxes.
- In this demo, three form fields are created with tooltips by using this plug-in.
- In the password field, the content option is used with bold and line break tags for proper formatting.
- That means you may use different HTML elements inside the tooltip as well.
Have a look:
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery.tooltip/jquery.tooltip.css">
<style>
label {
display: inline-block; width: 5em;
}
</style>
</head>
<body>
<p>A Form example with Tooltip</p>
<div>
<label>Your Name</label>: <input id="name" data-tooltip data-options='{"direction":"left", "content": "Enter your name", "title": "Tooltip in a form"}' /><br /><br />
<div><label>Email</label>: <input id="email" data-tooltip data-options='{"direction":"left", "content": "Enter your Email", "title": "Your Email"}'/><br /><br />
<div><label>Password:</label>: <input id="password" data-tooltip data-options='{"direction":"left", "content": "<b>Enter password that must be </b></br>(i) 6-24 characters long </br>(ii) Must contain a number </br>(iii) Must contain a capital letter", "title": "Password"}'/>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.tooltip/jquery.tooltip.js"></script>
</body>
</html>