Create HTML Tooltips by simple jQuery plug-in: 4 Demos

HTML5 tooltips with jQuery

Generally, tooltips in HTML are created by using the title attribute in a tag like a link or an image, etc. This way, a basic tooltip is created that is displayed as a user hovers the mouse over that element.

Tooltips can be a nice way to contextual help or to explain the purpose or intention of a certain element. For example, as entering the password in a textbox, you may show a tooltip with password creation guidelines. The password must be eight characters long, must contain a special symbol and a number etc.

I have covered a few tooltips-related tutorials including Bootstrap based tooltips, using a jQuery built-in tooltip plugin and another is here.

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 live 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 live demo where direction is set downwards:

html tooltip

See online demo and code

For using this plug-in in your web project, follow these steps.

Step 1:

Include the CSS file that defines tooltip’s style in the <head> section:

<link rel=”stylesheet” href=”css/jquery.tooltip/jquery.tooltip.css”>

(Set the path according to your directory structure)

Step 2:

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.

Step 3:

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>

Note: The style section only specifies the style of the div for this demo.

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.

html5 tooltip title

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 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:

html5 tooltip link

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:

html5 tooltip form

See online demo and code

The markup for the form:

<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 />

<label>Email</label>: <input id="email" data-tooltip data-options='{"direction":"left", "content": "Enter your Email", "title": "Your Email"}'/><br /><br />

<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>

 

Get the complete code from the demo page.