Introduction
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!" });
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" });
});
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
JTooltip.create({
target : ".e_top",
contentAttr : "data-jtooltip",
position: "top",
stem : false,
offset : { x : 0, y : -5 },
animateShow : true
});
JTooltip.create({
target : ".e_bottom",
contentAttr : "data-jtooltip",
position: "bottom",
stem : false,
offset : { x : 0, y : 5 },
animateShow : true
});
});
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. |
Usage
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.
