6 demos of jQuery tooltips plug-in: tooltipify

What is tooltipify plug-in?

The tooltipify is a jQuery plug-in for creating the sliding tooltips for different elements like textboxes or other form elements, paragraphs, span or div tags etc.

 

The tooltipify will replace the default browser tooltips that you may customize by using CSS properties.

Source Download plug-in
demo1 demo2 demo3

Setting up the tooltip jQuery plug-in on your website

Get the jquery-tooltipify.js or its minified version after downloading and unzipping the package. For optimum use, place jQuery library and plug-in JS file above the body closing tag:

 <script src=”//code.jquery.com/jquery-3.1.1.min.js”></script>

<script type=”text/javascript” src=”js/tooltipify/jquery-tooltipify.js”></script>

Place the tooltipify.css file in the <head> section:

<link rel=”stylesheet” href=”css/tooltipify/tooltipify.css” /></link>

Using the markup

The markup is simple. Just use the title attribute in the element where you want to display the tooltip. Also, refer the class in the wrapper like this:

Initiate the plug-in

See the demos below to learn more about this and grab the complete code.

A demo of tooltip in a textbox field

In this demo, the tooltip is displayed with default settings in a textbox field. Just bring the mouse over the textbox and tooltip will appear in sliding manner from the left:

jQuery tooltip default

See online demo and code

The markup for this demo:

The script:

 

A demo of displaying the tooltip on left

In this example, the tooltip is displayed towards the left of the h1 heading. This is done by using the position option of the plug-in with the value of “left”. See the demo by clicking the link or image below:

jQuery tooltip left

See online demo and code

The complete code:

 

Displaying tooltip towards bottom in an image

As such, you may display this jQuery tooltip in different elements including images. In this demo, I have used an image and the position is kept bottom:

jQuery tooltip bottom

See online demo and code

The code:

 

Similarly, you may display the tooltip by using the right value in the position option.

Increasing/decreasing the animation speed of tooltip

Us the animationDuration option with the time in milliseconds for controlling the speed of displaying and hiding the tooltip.

For example, animationDuration: 1200

See this in action in a demo:

See online demo and code

The script:

 

Increasing or decreasing the width

Use the width option in the jQuery code for specifying the dimensions of the tooltip:

jQuery tooltip width

See online demo and code

The script:

 

Creating HTML tooltips demo

The plug-in also has an option for creating the HTML tooltips. In this demo, I have used line breaks and an image inside the content option for creating the tooltip:

jQuery tooltip HTML

See online demo and code

The code:

 

The plug-in also supports a few methods and a other options that you may learn by visiting the developer’s page.