A jQuery tooltip plugin – powertip with setting up guide and demos

The tooltip plugin for jQuery

The powertip plug-in is based on jQuery that can be used for creating nice looking tooltips for your web projects.

You may create tooltips in different directions as the plug-in developer calls it: North West, North, North East, East, South West Alt and others. You may display tooltips on mouse hover or click states that can be used for different elements like buttons, paragraphs etc.

See the following demos along with the setup guide for using this jQuery tooltip plugin.

A demo of setting up and using powertip – tooltip plugin

In the demo, a number of buttons are created with different placement options available in the plug-in. Not to mention, the title text of the button becomes the tooltip. You may use different options as per requirement for specifying the direction of the tooltip. For example, ‘n’ means north, ‘e’ for East, nw-alt for north-west-alt and so on. See the demo along with code (I have used Bootstrap buttons so included the CSS file of Bootstrap).

See online demo and code

Following is the buttons code used:

<div>

<input type="button" class="n-w-a btn btn-danger" value="North West Alt" title="North west alt placement" />

<input type="button" class="n-w btn btn-danger" value="North West" title="North west placement" />

<input type="button" class="n btn btn-danger" value="North" title="North placement" />

<input type="button" class="n-e btn btn-danger" value="North East" title="North east placement" />

<input type="button" class="n-e-a btn btn-danger" value="North East Alt" title="North east alt placement" /><br />

<input type="button" class="w btn btn-success" value="West" title="West placement" />

<input type="button" class="e btn btn-success" value="East" title="East placement" /><br />

<input type="button" class="s-w-a btn btn-primary" value="South West Alt" title="South west alt placement" />

<input type="button" class="s-w btn btn-primary" value="South West" title="South west placement" />

<input type="button" class="s btn btn-primary" value="South" title="South placement" />

<input type="button" class="s-e btn btn-primary" value="South East" title="South east placement" />

<input type="button" class="s-e-a btn btn-primary" value="South East Alt" title="South east alt placement" />

</div>

 

This is the jQuery script for specifying the options and calling the plug-in:

$(function() {

// placement examples

$('.n').powerTip({ placement: 'n' });

$('.e').powerTip({ placement: 'e' });

$('.s').powerTip({ placement: 's' });

$('.w').powerTip({ placement: 'w' });

$('.n-w').powerTip({ placement: 'nw' });

$('.n-e').powerTip({ placement: 'ne' });

$('.s-w').powerTip({ placement: 'sw' });

$('.s-e').powerTip({ placement: 'se' });

$('.n-w-a').powerTip({ placement: 'nw-alt' });

$('.n-e-a').powerTip({ placement: 'ne-alt' });

$('.s-w-a').powerTip({ placement: 'sw-alt' });

$('.s-e-a').powerTip({ placement: 'se-alt' });

});

 

For setting up this plug-in for your web pages, you need to include a few JS files that are packaged with the downloaded zip file, that you may get from the credit link (from Github) website. (credit – stevenbenner)

You may also download these files by view source the demo page and saving the required files in your system. The required files are:

• jquery-1.12.3.js
• core.js
• csscoordinates.js
• displaycontroller.js
• placementcalculator.js
• tooltipcontroller.js
• utility.js
• jquery.powertip.css

Apparently, these are many as for as a tooltip functionality is required. However, the size is tiny for many files.

Get the complete code of the example in the demo page.

A demo of tooltip following mouse

In this example, a tooltip is created in a <div> tag where it follows the mouse movement. Again, the tooltip text is given in the title attribute of a div element. See the live demo:

See online demo and code

By using the followMouse option in the jQuery code as true, you may create tooltips following the mouse movement for any element:

$(‘#mousefollow-examples div’).powerTip({ followMouse: true });

A demo of tooltip containing link and other content

You may also create tooltips that contain content that a user can interact with. For example, it may contain links or images etc. In above example, you can only read the tooltip, however, in this demo a user may interact with its content as well:

See online demo and code

The intractable content can be created by using the tipContent option of the plug-in. For example:

var mouseOnDiv = $('#mouseon-examples div');

var tipContent = $(

'<p>You may use a paragraph</p>' +

'<p><a href="https://www.jquery-az.com/">A link tag as well</a></p>'+

'<p>and image..<img src="images/donut.png"></p>'

);

mouseOnDiv.data('powertipjq', tipContent);

mouseOnDiv.powerTip({

placement: 'e',

mouseOnToPopup: true

});

 

See the complete code on the demo page.