LiteTooltip.js Guide v2.0

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

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

Download Now »

* WordPress version also available!

Overview

It's a lightweight JQuery tooltip plugin 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.

CSS

Include the LiteTooltip.css inside the <head> tags as shown below:

<link href="css/LiteTooltip.css" rel="stylesheet" />

JavaScript

Add the LiteTooltip.js at the bottom of your HTML page just above the closing </body> tag.

<script type="text/javascript" src="js/LiteTooltip.js"></script>

After including the above CSS and JavaScript plugin files, now you are ready to attach the plugin method to any HTML element for which you want to show the tooltip. As an example you can call the following minimized code to display the tooltip for <a> tag:

<script type="text/javascript">
    $("a").LiteTooltip();
</script>

You can add the above code just below the LiteTooltip.js script.

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">
    // 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">
    // 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">
    $("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">
    $("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">
    $("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
$("#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>'
});
                        

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
$(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();
});


$("#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>'
});
                        

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
$("#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>'
});
                        

9. Videos data-title

Title Preview
Vimeo.com
"The Old Samurai"

Youtube.com
"The Host - Trailer"
Usage
HTML

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

<div class="video-wrapper">
    <iframe src="EMBED VIDEO URL" scrolling="no" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen>
    </iframe>
</div>
                        

Or alternatively you can use the JavaScript code:

JavaScript
$("#playvimeo").LiteTooltip({
    textalign: 'left', 
    trigger: 'hoverable', 
    location: "right", 
    padding: 5,
    title: 
    '<div class="video-wrapper">' + 
    '<iframe src="EMBED VIDEO URL" scrolling="no" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen>' + 
    '</iframe>' +
    '</div>'
});
                        

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 Released Responsive 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 width parameter issue.

2. optimized animation and instance removal.

v1.1 March 01, 2013

1. issticky parameter added for "click" trigger.

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

3. 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 Feburary 14, 2013

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

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