Hit enter after type your search item
Home / jQuery / Create HTML tooltips by simple jQuery plug-in: 4 demos

Create HTML tooltips by simple jQuery plug-in: 4 demos

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

Tooltip can be a nice way for contextual help or for explaining 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 tutorial 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 light-weight jQuery plug-in. The plug-in name is jquery.tooltip.js that 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:


 

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. See the demo and code by clicking the image or link below:

html5 tooltip title

See online demo and code

The markup:


 

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

See online demo and code

The markup:


 

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:


 

Get the complete code from the demo page.

This div height required for enabling the sticky sidebar