LiteTooltip.js Guide
for WordPress

Responsive Jquery Tooltip with Valid HTML5 and CSS3 | Smarter Code for Faster Development | Responsive & Interactive Web designs

"The First Fully Responsive ToolTip Bundle for WordPress with 12 Positions, Customizable Color Presets
Menu Templates, Image Maps, Hotspots, Videos and Triggers"

Download Now »

* jQuery version also available!

Overview

It's a lightweight Jquery tooltip plugin for WordPress that supports 12 positions, multiple background shades, videos, image map areas, image hotspots and menus with responsive appearance on the web pages.

Data Attributes "data-"

You can use the data- attributes (provided in the API reference) of any HTML element to use the different features of LiteTooltip.js.

<a href="#" 
    data-position="top" 
    data-title="show this text as tooltip">
    link text
</a>

This plugin uses the HTML5 data-api instead of using default attributes so that the page code passes the W3C's HTML and CSS validation successfully incase you want to show HTML formatted tooltips.

Programmatic API

Yes, you can use the LiteTooltip.js API along with data- attributes. You can specify the tooltip parameters using HTML markup as well as using plugin method created under the LiteTooltip namespace in a single code line.

$("a").LiteTooltip(); // simple code to initialize it with defaults
$("a").LiteTooltip({ textalign : "center" }); // "textalign" parameter with value "center"
$("a").LiteTooltip({ textalign : "center", location : "bottom" }); // multiple parameters

API uses the default JSON based { key: value } comma-separated pairs of parameters to specify the values for different settings of LiteTooltip.

Its very simple to integrate the LiteTooltip.js plugin to your WordPress in just 2 easy steps.

Step 1.

Install the "zipped" plugin to your WordPress site and activate it. We have already optimized the plugin to load the minimized and compressed code files at the bottom of WordPress pages. It automaticaly loads the LiteTooltip.min.css, jquery-1.9.0.min.js and LiteTooltip.min.js in the background.

Step 2.

Use Shortcode to make your implementation task much easier and if you don't want to mess with jQuery code and CustomField.

Learn about Litetooltip.js shortcodes here.

OR alternatively you can use CustomField:

Add a CustomField with name litetooltip_js for your posting.

You can write the HTML code in the WYSIWYG Editor of WordPress and then pass the associated Jquery code as value for the litetooltip_js CustomField.

Sample Task

Add the following HTML code to your posting:

<a href="#" 
    class="redlink"
    data-position="top" 
    data-title="show this text as tooltip">
    link text
</a>

Next create/select the litetooltip_js CustomField and set its following Jquery code value:

<script type="text/javascript">
// <![CDATA[
    // call plugin method with element selector
    // to attach the tooltip
    $(".redlink").LiteTooltip(); 
// ]]
</script>
                    

You can add as many code statements for multiple elements to call the LiteTooltip in the above code block.

Note You are recommended to use unique id attribute value or CSS class attribute value for the target elements to attach the LiteTooltip.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-location="".

Name type default description
title string '' It sets the tooltip text. You can specify plain/html formatted text.
location string 'top' 12 Positions for the tooltip - top | right | bottom | left | top-left | top-right | right-top | right-bottom | bottom-left | bottom-right | left-top | left-bottom
opacity number 0.8 Transparent density between 0 and 1.
backcolor string '#000000' Color name or Hex-code for setting the background color.
textcolor string '#ffffff' Color name or Hex-code for setting the fonts color.
textalign string 'center' 3 types of text alignment - left | right | center.
margin number 5 Spacing between target and tooltip.
padding number 10 Spacing between tooltip text and its edges.
width number 0 Fixed width for tooltip balloon.
templatename string '' Specify the predefined template name - Conifer | Limeade | BlueRomance.
delay number 0 Delay showing or hiding the tooltip. It accepts number value as milliseconds (ms).
trigger string 'hover' Event for triggering the tooltip - click | hover | focus | hoverable
v1.1 new option included:
Name type default description
issticky boolean true It sets sticky behavior for the tooltip balloon.
Note It works with "click" trigger only and combines the "hoverable" trigger behavior to the tooltip when set to false.
v2.0 new options included:
Name type default description
container string body Appends the tooltip to a specific element. Example: container: 'body'
Note Always specify the value of id attribute of container element. 'body' is the default value so no need to specify it.
shadow number 1 If 1 then enables the shadow effect and if 0 then disables the tooltip shadow effect.
Options can be specified for individual tooltips through the use of data attributes also.

Here are the set of examples and code customization samples.

1. Positions data-location

top-left top top-right
left-top right-top
left right
left-bottom right-bottom
bottom-left bottom bottom-right

Usage

You can specify the different data-location attribute values to set the position of tooltip balloon.

HTML
<a href="#" 
      data-title="tooltip text info here" 
      data-location="right">
      target element
</a>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    // call plugin method with element selector
    // to attach the tooltip
    $("a").LiteTooltip(); 
// ]]
</script>
                    

2. Color Presets data-backcolor, data-textcolor

backcolor textcolor Preview
#df3030 view
#ff1e53 view
#f79992 #333333 view
#a2d959 #000000 view
#7fba00 view
#4cc744 view
#bfd9f0 #333333 view
#6699cc view
#4182c2 view
#ed9122 view
#fecf3d #333333 view
#7c4d94 view

Usage

You can specify the different data-backcolor and data-textcolor attribute values to change the background and font color of tooltip balloon.

HTML
<a href="#" 
      data-backcolor="#f79992"
      data-textcolor="#333333"
      data-title="tooltip text info here" 
      data-location="right">
      target element
</a>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    // call plugin method with element selector
    // to attach the tooltip
    $("a").LiteTooltip();
// ]]
</script>
                    

Alternatively, you can also pass the backcolor and textcolor parameters in the JQuery method:

<script type="text/javascript">
// <![CDATA[
    $("a").LiteTooltip({ backcolor: "#f79992", textcolor: "#333333" });
// ]]
</script>
                    

3. Inbuilt Templates data-templatename

Template Styles 1 Template Styles 2
templatename Preview
AlizarinCrimson view
RadicalRed view
Geradline view
Conifer view
Limeade view
AppleGreen view
Spindle view
Danube view
BostonBlue view
CarrotOrange view
BrightSun view
Affair view
templatename Preview
HotRed view
HuskyBlue view
MoonAffair view
PaleMint view
BlueRomance view
AmazonLemon view
LimeConfier view
MustardSun view
AtollSea view
BlazeOrange view
CoffeeConfetti view
OysterPrim view

Usage

The following HTML template snippet can be used as data-title attribute to display the HTML formatted tooltip. Above template names can be used to set the look and feel of tooltip balloon.

HTML
<div class="template">
    <h4>Heading</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Use the data-templatename attribute to specify the template preset names provided in the above list.

<a href="#" 
    data-templatename="AppleGreen"
    data-location="right">
    target element
</a>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    $("a").LiteTooltip({ 
    templatename: "AppleGreen", // optional if already specified in data-templatename attribute
    title: 
    '<div class="template">' +
    '<h4>Heading</h4>' +
    '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' +
    '</div>'
    });
// ]]
</script>
                    

5. ListItem Templates data-title

List-Item Template Styles 1 List-Item Template Styles 2
templatename Preview
AlizarinCrimson view
RadicalRed view
Geradline view
Conifer view
Limeade view
AppleGreen view
Spindle view
Danube view
BostonBlue view
CarrotOrange view
BrightSun view
Affair view
templatename Preview
HotRed view
HuskyBlue view
MoonAffair view
PaleMint view
BlueRomance view
AmazonLemon view
LimeConfier view
MustardSun view
AtollSea view
BlazeOrange view
CoffeeConfetti view
OysterPrim view

Usage

The following HTML template snippet can be used as data-title attribute to display the Ordered/Unordered ListItems in the tooltip. Above template names can be used to set the look and feel of tooltip balloon.

HTML
<div class="template">
    <h4>Heading</h4>
    <ul>
        <li>list item 1 text here</li>
        <li>list item 2 text here</li>
    </ul>
    <ol>
        <li>list item 1 text here</li>
        <li>list item 2 text here</li>
    </ol>
</div>

Use the data-templatename attribute to specify the template preset names provided in the above list.

<a href="#" 
    data-templatename="BostonBlue"
    data-location="right">
    target element
</a>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    $("a").LiteTooltip({ 
    tempaltename: "BostonBlue", // optional if already specified in data-templatename attribute
    title: 
    '<div class="template">' +
    '<h4>Heading</h4>' +
    '<ul>' +
    '<li>list item 1 text here</li>' +
    '<li>list item 2 text here</li>' +
    '</ul>' +
    '<ol>' +
    '<li>list item 1 text here</li>' +
    '<li>list item 2 text here</li>' +
    '</ol>' +
    '</div>'
    });
// ]]
</script>
                    

6. Image Map Area data-title

Usage

You can take an idea to create HTML Image Map areas and attaching the tooltip to them from the following code snippets.

HTML

HTML code for creating image maps

<img src="images/Jaguar-XFR.jpg" usemap="#jaguarimagemap" style="width: 600px; height: 329px" />
<map name="jaguarimagemap" id="jaguarimagemap">
    <area id="jarea1" shape="rect" coords="275, 120, 330, 160" href="#" alt="" />
    <area id="jarea2" shape="rect" coords="110, 150, 210, 200" href="#" alt="" />
</map>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    $("#jaguarimagemap #jarea1").LiteTooltip({
        textalign: "left",
        templatename: "BrightSun",
        title:
        '<div class="template">' +
        '<p>' +
        '<img src="images/red.jpg" class="image-left" />' +
        '2013 Jaguar XFR in optional Italian Racing Red Metallic ' + 
        'with standard 20-inch Nevis Alloy Wheels.</p>' +
        '</div>'
    });

    $("#jaguarimagemap #jarea2").LiteTooltip({
        textalign: "left",
        templatename: "BrightSun",
        title:
        '<div class="template">' +
        '<p>' +
        '<img src="images/Xenon-HID.jpg" class="image-left" />' +
        'Xenon HID headlamps with daytime running lights close up.' +
        '</p>' +
        '</div>'
    });
// ]]
</script>

                        

Take a look on the above code again, we have used the JQuery selector $("#jaguarimagemap #jarea1") with id of map and area tags for attaching the tooltip to the mapped areas of image.

7. Image Hotspots data-title

Usage

Following code snippets show the way you can create hotspots on an image using HTML and CSS.

HTML

HTML code for creating image hotspots

<div class="imagehotspot-container" style="position: relative; width: 600px; height: 288px; z-index: 101;">
    <img src="images/ford-fusion.jpg" style="width: 600px; height: 288px; position: absolute; top: 0px; left: 0px; z-index: 102" />
    <div id="fhotspot1" class="redhotspot"
        style="position: absolute; z-index: 103; width: 10px; height: 10px; top: 233px; left: 250px;">
    </div>
    <div id="fhotspot2" class="redhotspot"
        style="position: absolute; z-index: 103; width: 10px; height: 10px; top: 135px; left: 260px;">
    </div>
</div>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    $(document).ready(function () {
        // code to display red rounded hotspots
        $(".redhotspot").css({
            "border": "solid 1px #990000",
            "background": "#cc0000",
            "border-radius": "6px"
        })
        
        // code to set the blink behavior for hotspots
        function blink_hotspot() {
            $('.redhotspot').animate({ "opacity": '0.3' }, 
                            'slow').animate({ 'opacity': '0.8' }, 
                            'fast', 
                            function () { blink_hotspot(); });
        }
        blink_hotspot();
    });
// ]]
</script>

<script type="text/javascript">
// <![CDATA[
    $("#fhotspot1").LiteTooltip({
        textalign: "left",
        templatename: "BostonBlue",
        title:
        '<div class="template">' +
        '<p>' +
        '<img src="images/alloy.jpg" class="image-left" />' +
        'Take your pick of standard and available wheels on the 2013 Ford Fusion.' +
        '</p>' +
        '</div>'
    });

    $("#fhotspot2").LiteTooltip({
        textalign: "left",
        templatename: "BostonBlue",
        title:
        '<div class="template">' +
        '<p>' +
        '<img src="images/interior-ford.jpg" class="image-left" />' +
        'Ambient lighting in the Titanium with cool interior illumination.' +
        '</p>' +
        '</div>'
    });
// ]]
</script>
                        

8. Image Templates data-title

CSS class Preview
image-left View : using template View
image-right View : using template View

Usage

You can use one of the following HTML formatted templates to display the images inline to the content in tooltip balloon. image-left and image-right CSS class can be used to align the images in the content.

HTML
<p>
    <img src="images/nature.jpg" class="image-left"/> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Donec elementum consectetur felis non viverra.
</p>
                        

Above HTML template can be used to display the inline images in the tooltip.

<div class="template">
    <h4>Heading</h4>
    <p>
        <img src="images/nature.jpg" class="image-left"/>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Donec elementum consectetur felis non viverra.
    </p>
</div>
                        

The above template needs the name of inbuilt template as a value for data-templatename attribute to apply the look and feel.

JavaScript
<script type="text/javascript">
// <![CDATA[
    $("#div1").LiteTooltip({
        textalign: 'left',
        trigger: 'hover',
        location: "right",
        padding: 5,
        title:
        '<p>' +
        '<img src="images/nature.jpg" class="image-left"/> ' +
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
        'Donec elementum consectetur felis non viverra.' +
        '</p>'
    });
// ]]
</script>
                        

9. Videos data-title

Title Preview
Vimeo.com
"The Old Samurai"

Youtube.com
"The Host - Trailer"
Usage

Most of the video sharing sites have upgraded their media players to responsive HTML5 players. You are recommended to use their provided iframe code and try emedding it by removing the height/width attributes of iframe.

HTML

You can use the following HTML template to embed the video in tooltip:

<div class="video-wrapper">
    <iframe src="http://player.vimeo.com/video/58277131?badge=0&color=ff9933" 
        frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</div>
                        
JavaScript
<script type="text/javascript">
// <![CDATA[
    $("#playvimeo").LiteTooltip({
        textalign: 'left', 
        trigger: 'hoverable', 
        location: "right", 
        padding: 5,
        title: 
        '<div class="video-wrapper">' + 
        '<iframe src="http://player.vimeo.com/video/58277131?badge=0&color=ff9933" ' +
        'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
        '</iframe>' +
        '</div>'
    });
// ]]
</script>
                        

10. Triggers data-trigger

trigger Description
click data-trigger="click" It attaches the click event to the target and toggles the visibility of tooltip on clicking the target element. It also hides the tooltip when user clicks anywhere on rest of the web page.
hover daat-trigger="hover" It is the default behavior that shows/hides the tooltip on mouse over and mouse out event.
hoverable data-trigger="hoverable" It allows to show the tooltip on mouse over event of target element. The tooltip remains in visible state until the user moves the mouse pointer over and then out of the hoverable tooltip balloon.
data-trigger="focus" It attaches the focus/blur event to target form input elements. The tooltip appears when focus event of the input contol fires and hides on blur.

11. Delay data-delay

preview « mouse over the preview and wait for 5 seconds for tooltip to appear. data-delay accepts number value as milliseconds (ms) where 1000 ms = 1 second.

v1.1 updates for "delay":

You can use the delay parameter or data-delay attribute with "click" and "hoverable" trigger to autohide the tooltip balloon after the specified time if user skips the mouse hover event. It would work for "click" trigger only if the issticky parameter or data-issticky attribute is to false.

v2.0 April 25, 2014

1. Added a callback method for passing the tooltip content dynamically.

2. new container parameter added for specifying the tooltip container to display the tooltip content in that particular area instead of traditional balloon.

3. new shadow parameter added to enable/disable the tooltip shadow effect.

4. major update 1 Released Shortcode Generator tool for Litetooltip to generate and insert the shortcode in your WordPress Editor with few mouse clicks.

5. major update 2 Released Responsvie Image Hotspot Generator Tool specially designed for Litetooltip. Now you can create responsive Image hotspot tooltips with mouse clicks only and the tooltip will generate the code for you instantly.

v1.5 Feb 07, 2014

1. resolved WordPress formatting issue caused by Litetooltip plugin.

2. resolved width parameter issue.

3. optimized animation and instance removal.

v1.1 March 15, 2013

1. Shortcodes added for providing the ease to implement the Litetooltip.js and now you can use the plugin even if you don't have jQuery knowledge.

2. issticky parameter added for "click" trigger.

3. Now delay parameter can be used with "hoverable" trigger to autohide the tooltip if user skips mouse hover event.

4. Now delay parameter can be used with "click" trigger to autohide the tooltip if user skips mouse hover event.
Note use issticky: false or data-issticky="false" with "click" trigger to see the effect of delay parameter.

v1.0 March 05, 2013

1. It was our first release of LiteTooltip.js plugin.

1. Does it support text alignment?

Yes. You can use the short codes as provided in the API reference:

data-textalign="left"
data-textalign="right"
data-textalign="center"

2. Can I change the background color of tooltip?

Yes. You can specify any hex color code to set the background color of your choice:

data-backcolor="#ff0000" // for red
data-backcolor="#00ff00" // for green
data-backcolor="#0000ff" // for blue
    

3. Can I change the text color of tooltip?

Yes. You can specify any hex color code to change the text color:

data-textcolor="#ff0000" // for red
data-textcolor="#00ff00" // for green
data-textcolor="#0000ff" // for blue

4. Does it work with HTML form elements?

Yes. You can attach the tooltip to most of the form elements.

5. Can I setup the tooltip location to different positions of an element?

Yes. The Lite Tooltip supports 12 predefined positions. You can specify the location using data-location attribute of the target element:

data-location="top | right | bottom | left |
               top-left | top-right | 
               right-top | right-bottom |
               bottom-left | bottom-right | 
               left-top | left-bottom"
    

6. Does it support HTML image map areas?

Yes. You can attach the HTML image map area selector to attach the tooltip to image hotspots.

7. Can I use the HTML formatted text for the tooltip?

Yes. You can use the HTML tags for displaying the HTML formatted text in a tooltip.

8. Can I use the click event to show/hide the tooltip?

Yes. You can specify the data-trigger="click" to enable the click event for the tooltip.

9. Does it support focus/blur event for HTML input elements?

Yes. You can specify the data-trigger="focus" to enable the focus/blur event for the tooltip.

10. Can I watch the videos in tooltip?

Yes. You can create the sticky tooltips using the API code references and examples to enable the video tooltips.

11. Can I display tooltip as menu?

Yes. You can use the predefined menu templates for the tooltip.

12. Does it support any delay feature to show/hide the tooltip after a specified time?

Yes. You can use data-delay="2000" (time in milliseconds) attribute to delay the tooltip actions.

You can send us your experience implementing the Litetooltip and also can ask for support here:

Send us your message