LiteTooltip.js Responsive jQuery Plugin 2.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"

Table of Contents

  1. HTML Structure
  2. CSS Files
  3. JavaScript
  4. API Usage
  5. Change Log
  6. Contact Us

HTML Structure - top

Follow these 4 simple steps to just drag and drop the LiteTooltip.js jquery plugin and its ready to use:

<html>
    <head>
        <title></title>

        <!-- 1. add css file here -->
    </head>
    <body>

        <!-- 2. add jquery file -->
        <!-- 3. add litetooltip.js file -->
        <!-- 4. initialize litetooltip plugin -->
    </body>
</html>

CSS Files - top

This bundle includes LiteTooltip.css and LiteTooltip.min.css files inside the "css" directory. Copy both the files to your main project.

You can add LiteTooltip.css file using following code:

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

OR

You can add LiteTooltip.min.css file using following code:

<link href="css/LiteTooltip.min.css" rel="stylesheet" />
You must add only LiteTooltip.min.css file in your final release of project.

JavaScript - top

This plugin uses Jquery so you must add it before adding the LiteTooltip.js plugin script file. We have included jquery-1.9.0.js and jquery-1.9.0.min.js files inside the "js" directory. You can copy both the files to your main project.

You can add jquery-1.9.0.js file using following code:

<script type="text/javascript" src="js/jquery-1.9.0.js"></script>

This bundle includes LiteTooltip.js and LiteTooltip.min.js files inside the "js" directory. Copy both the files to your main project.

You can add LiteTooltip.js file using following code:

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

OR

You can add LiteTooltip.min.js file using following code:

<script type="text/javascript" src="js/LiteTooltip.min.js"></script>
You must add only jquery-1.9.0.min.js and LiteTooltip.min.js file in your final release of project.

Initializing Litetooltip

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="right" 
    data-title="show this text as tooltip">
    link text
</a>

Add the following code just below the code provided for adding the LiteTooltip.js or LiteTooltip.min.js file.

It will call the LiteTooltip plugin for the target element to display the tooltip balloon:

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

Above code will display the tooltip with text specified in the data-title attribute of a tag.

Sample

Move your mouse over the following link text to see the working sample

preview

API Usage - top

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.

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.

You can learn more about the usage of LiteTooltip.js from our complete API Reference guide here.

Change Log

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.

Contact Us - top

For any issues or further support you can contact us here.

Go To Table of Contents