Not just another Tooltip library. Ok, it kinda is ...

by Jamie Tsao


JTooltip is a lightweight, easy to use jQuery library for creating tooltips. The tooltip can appear above, below, to the right, or to the left of the target element.


Simple to Use

You create tooltips for any 'target' by calling JTooltip.create with a CSS selector/jQuery object/DOM element, and the content for the tooltip.

<span class="tooltip_target" id="jingle-1">Jingle</span>
<span class="tooltip_target" id="jingle-2">Jingle</span>
<span class="tooltip_target" id="jingle-3">Jingle</span>
var jqObj = $('#jingle-2');
var ele = document.getElementById('jingle-3');

JTooltip.create({ target : "#jingle-1", content: "Bells" });
JTooltip.create({ target : jqObj, content: "Bells" });
JTooltip.create({ target : ele, content: "All The Way!" });
Jingle Jingle Jingle

Text from the title attribute can be used as content by not including the content option (use the contentAttr option to specify an attribute other than title).

<span id="foo" title="From the 'title' attribute">Foo</span>
<span id="bar" data-jtooltip="From the 'data-jtooltip' attribute">Bar</span>
$(document).ready(function() {
    JTooltip.create({ target : "#foo" });
    JTooltip.create({ target : "#bar", contentAttr : "data-jtooltip" });
Foo Bar

Other configuration options include the ability to hide the stem, customize the offset position, and animate the display of the tooltip:

$(document).ready(function() {
    // multiple tooltips can be created with a single 
    // invocation by using a class selector
                      target : ".e_top",
                      contentAttr : "data-jtooltip",
                      position: "top",
                      stem : false,
                      offset : { x : 0, y : -5 },
                      animateShow : true

                      target : ".e_bottom",
                      contentAttr : "data-jtooltip",
                      position: "bottom",
                      stem : false,
                      offset : { x : 0, y : 5 },
                      animateShow : true

:cat: :dog: :mouse: :hamster: :rabbit: :wolf: :frog: :tiger: :koala: :bear: :pig: :cow: :boar: :monkey_face: :horse:
:camel: :sheep: :elephant: :panda_face: :snake: :bird: :chicken: :turtle: :ant: :fish: :octopus: :snail: :whale: :dolphin: :crocodile:

Configuration Options

JTooltip can be customized by overriding default configuration options. JTooltip.create expects an options object. target is the only required option.

Option Name Description
target Target that triggers the tooltip when moused over. This can be a CSS selector, jQuery object, or DOM element. This option is required.
content Content displayed in the tooltip. This can be a string, an object, or a function that evaluates to a string or object. If not specified, the content is taken from the title attribute (use contentAttr to specify a different attribute) of the target.
contentAttr If content is not set, this option can be used to specify an attribute other than title to use as the content.
position Position of the tooltip relative to the target. Options are top (default), right, bottom, and left.
offset Offset (in pixels) where the tooltip should appear, relative to the target. Specified as an object with x & y properties (e.g. { x : 0, y : 10 }). Default is 5 pixels to the top/right/bottom/left (depending on position) of the target.
showDelay Delay (in milliseconds) before the tooltip appears after mousing over the target. Default is 100 milliseconds.
hideDelay Delay (in milliseconds) before the tooltip disappears after mousing away from the target (and tooltip). Default is 75 milliseconds.
animateShow Indicates whether (true) or not (false) to animate the display of the tooltip. Default is false.
animateDur The duration (in milliseconds) of the tooltip animation (if animateShow is true).
stem Indicates whether (true) or not (false) to include a stem for the tooltip bubble. Default is true.
maxWidth Maximum width (in pixels) of the tooltip. Default is 300 pixels.


To start using JTooltip, simply include jQuery and the JTooltip javascript and css files.

<link rel="stylesheet" type="text/css" href="jtooltip.css" />
<script src="jquery.min.js"></script>
<script src="tooltip.js"></script>

Issues and Enhancements

Find a bug? Would like to request an enhancement? Please log it here.


Fork me on GitHub Download .zip Download .tar.gz View on GitHub