Age of Article Warning:
This article was originally published 28 months ago. The tips and techniques explained may be outdated, or information may longer be applicable. Please consider this when viewing the below content.

Tooltips can provide your website viewers with additional useful information. They are used in a form to provide quick help info, they are used in a link to show the title text when hovering over the link, and there are many more uses for them.

A clever tooltip can be used to show micro content when hovering over an image or text. For example you could include an incentive, include links to more information, show an image or icon, show answers to questions and much more. They open up a way to allow more interactivity on a web page, and you can be as creative as you like.

Hover over the 4 examples below to see what you could do:

Check out my Social Profiles
Display title text in a link – A website link
Hover for Colour Options

The tooltips on this page are styled and animated using ToolTipster which is a jQuery plugin for creating modern tooltips.

There is plenty of information available on the Tooltipster website which shows options and how to implement the plugin files on a website, but the information below shows you how to implement the tooltips on a WordPress website.

Step 1:
Download Tooltipster zip file and extract the files.

Step 2:
Create a new folder on your website called “js”, inside your childtheme folder. If you’ve implemented some of the other jQuery tutorials on my site, then you may already have this folder setup.

Step 3:
Now create a new folder called “tooltipster” inside the “js” folder. This “tooltipster” folder is where you add the required Tooltipster files.
So add the files “tooltipster.css” and “jquery.tooltipster.min.js” into the “tooltipster” folder. If you want to use the other css themes, then also add these into the folder. For this tutorial, I will also include the “tooltipster-shadow.css” file, so add this into the “tooltipster” folder also.

Step 4:
We need to create a javacript file that identifies the jQuery selectors for applying the tooltipster script to, as well as controlling your styling options. So go ahead and create a file called “tooltipster-scripts.js” and insert the following:

/* Tooltipster Scripts v1.0.1 */
jQuery(document).ready(function($){
    // setup some defaults for all tooltipsters
    $.fn.tooltipster('setDefaults', {
        theme: 'tooltipster-shadow',
        touchDevices: true
    });
    //target a href links for title text
    $('a[href]').tooltipster({
        animation: 'fade',
        multiple: true
    });
    //target tooltip class for title text
    $('.tooltip').tooltipster({
        animation: 'grow',
        multiple: true
    });
});

The above javascript code firstly sets up some defaults for Tooltipster styling, so I’ve selected the default theme to be “tooltipster-shadow” rather than the standard default setting which is “tooltipster-default”.
Secondly I’ve identified the a[href] selector and instructed the browser to show a “fade” tooltip containing the text in the title tag of the a href link.
Thirdly is an instruction to create a “grow” tooltip, containing the title tag text, for any elements that have the class “tooltip”.

There are many options available and you can see some of these here. So feel free to customise the above as required.

When you are done, don’t forget to upload this “tooltipster-scripts.js” file into the “tooltipster” folder in your childtheme.

Step 5:
Now you need to make sure that all the scripts and stylesheets are loaded on your webpages, so we do this using the WordPress wp_enqueue_scripts function.

You need to create the following function and add it either into your childtheme’s functions.php file, or alternatively you can add it into an mu-plugin php file.

 function tooltipster_scripts_enqueue(){
        wp_enqueue_style('tooltipstercss',get_stylesheet_directory_uri().'/js/tooltipster/tooltipster.css');
        wp_enqueue_style('tooltipster-shadow',get_stylesheet_directory_uri().'/js/tooltipster/tooltipster-shadow.css');
        wp_enqueue_script('tooltipster',get_stylesheet_directory_uri().'/js/tooltipster/jquery.tooltipster.min.js',array('jquery'),'3.2.6');
wp_enqueue_script('tooltipster-scripts',get_stylesheet_directory_uri().'/js/tooltipster/tooltipster-scripts.js',array('jquery','tooltipster'),'1.0.1');
}
add_action('wp_enqueue_scripts','tooltipster_scripts_enqueue');

*important note: We are using Tooltipster version 3.2.6 for this tutorial, but if you are using a later version be sure to update the version number in your code.

Step 6:

Now you are ready to start using your new Tooltipster scripts. If you have any existing links on pages, that have text in the title tag, then they will be showing that text in a tooltip already.

Here are some examples on how you could use it based on the above settings:

  • An image with a tooltip:
    <img src=”THE-IMAGE-URL” class=”tooltip” title=”HERE IS WHERE YOU ADD THE TOOLTIP TEXT”>
  • A link with a tooltip:
    <a href=”THE-LINK-URL” title=”HERE IS WHERE YOU ADD THE TOOLTIP TEXT”>link text</a>
  • Some text with a tooltip:
    <span class=”tooltip” title=”HERE IS WHERE YOU ADD THE TOOLTIP TEXT”>the text to hover over</span>

Step 7: Extra options?
How to add an image, a link, or other HTML into a tooltip?

Well there are a couple of options, so check out the instructions on the Tooltipster site, however this is the procedure that I have used for the above image tooltip example:
Add the following extra code to the “tooltipster-scripts.js”

//target tooltip image
    $('.tooltip-image-name').tooltipster({
        content: $('<img src="IMAGE-URL" width="150" height="150"><br>ADD TEXT HERE'),
        animation: 'grow',
        multiple: true
    });

Just add the IMAGE URL for the image that you want the tooltip to display, including the width and height for displaying the image, as well as any additional text or html, into the “content:” line above.

Also modify the jQuery selector for whichever class you are going to apply this tooltip to. In this example we are targeting the class “tooltip-image-name”, so to use this tooltip, wrap a text or image in the class “tooltip-image-name”.

What about adding a helpful tooltip to a form field?
Well if you can edit the form fields, you could give them a class=”tooltip” and then use title=”tooltip text”. This would be the best option as you can simply add in title text for the tooltip at the same time.

However what if you cannot edit your form fields? Well then see if you can target the “id” for the form field. See below a simple form input field for “Name”, that I’ve given an id=”customernameID”.

Ok so now I would add the following extra code to the “tooltipster-scripts.js”

    //target form input field with id of customernameID
    $('input#customernameID').tooltipster({
        content: 'Enter your full name',
        animation: 'fade',
        position: 'right',
        multiple: true
    });

This would now add the tooltip, as you can see if you hover over the name input field above.

So that is how to use Tooltipster jQuery to Create Custom Tooltips in WordPress – If you implement this on your website, let me know in the comments and I’ll check it out.

 

Create Custom Tooltips in WordPress using jQuery Tooltipster was last modified: September 6th, 2016 by David Tiong
Create Custom Tooltips in WordPress using jQuery Tooltipster