LiteTooltip.js Shortcodes
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

Shortcodes would provide you the ease to implement the litetooltip in your WordPress posting even if you don't have any jQuery knowledge. You can simply bind the target HTML element with shortcode using its CSS class name or ID. Following is a sample of Litetooltip.js shortcodes which can used in WYSIWYG editor of WordPress.

[litetooltip targetid="span1"]
show this text as tooltip
[/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.

Continue reading for learning from shortcode examples below.

Sample Task

Add the following HTML code to your posting:

<a href="#" 
    id="link1">
    link text
</a>

You can use the following shortcode to attach the tooltip to above link.

[litetooltip targetid="link1"]
show this text as tooltip
[/litetooltip]

Here is a shortcode tags and attributes reference guide:

litetooltip - main wrapper

[litetooltip Attributes]
<!-- tooltip text area -->
<!-- tooltip templates area -->
[/litetooltip]
                    

Attributes

Following are the attributes for litetooltip shortcode:

Attribute type default description
targetid | targetcss string '' You can bind the target HTML element by specifying its CSS Class name or ID.
Note Use any one of these attributes.
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.
You can specify the attribute values enlcosed within double quotes "value" after an equal to sign. e.g.: location="right".

litetooltip_template - nested template shortcode

[litetooltip Attributes]
    <!-- template container start -->
    [litetooltip_template]
        [litetooltip_heading]heading goes here[/litetooltip_heading]
        [litetooltip_content]content goes here[/litetooltip_content]
    [/litetooltip_template]
    <!-- template container end -->
[/litetooltip]
                    

You can use templatenames from the list of inbuilt templates provided in the guide.

litetooltip_menu - nested template shortcode

[litetooltip Attributes]
    <!-- menutemplate container start -->
    [litetooltip_menu]
        [litetooltip_menuitem link="URL"]menu item text goes here[litetooltip_menuitem]
        [litetooltip_menuitem link="URL"]menu item text goes here[litetooltip_menuitem]
        [litetooltip_menuitem link="URL"]menu item text goes here[litetooltip_menuitem]
        [litetooltip_menuitem islast="true" link="URL"]menu item text goes here[litetooltip_menuitem]
    [/litetooltip_menu]
    <!-- menutemplate container end -->
[/litetooltip]
                    

You can use templatenames from the list of menu templates provided in the guide.

- Attributes

Name type default description
link string '' specify the URL for menu item
islast boolean false specify its value as true for last menu item to hide its bottom border.

litetooltip_hotspot_blink - blinking dots

[litetooltip_hotspot_blink Attributes]
[/litetooltip_hotspot_blink]
                        

- Attributes

Name type default description
targetcss string '' You can bind the target HTML element used for showing hotspot dot by specifying its CSS Class name.
bordercolor string '' Color name or Hex-code for setting the border color of dot
backcolor string '' Color name or Hex-code for setting the background color of dot
radius number specify the numeric value for setting up the border radius of dot (if want to show round dot otherwise set it to 0).

litetooltip_video - nested template shortcode

[litetooltip Attributes]
    <!-- video container start -->
    [litetooltip_video]
        <!-- iframe/embed code here -->
    [/litetooltip_video]
    <!-- video container end -->
[/litetooltip]
                    

Don't want to write code then try this shortcode generator tool for Litetooltip.js plugin here.