Summary
Homepage:
http://api.jqueryui.com/tooltip/
Author(s): see
http://jqueryui.com/about
Version: 1.12.0
Usage
To load the library into the current wiki page, add this somewhere on the page:
%JQREQUIRE{"ui::tooltip"}%
This will initialize all DOM elements with a
jqUITooltip
css class and add a jQuery-ui tooltip to it.
<a href="#" class="jqUITooltip" title="This is the tooltip content">hover me</a>
hover me
The plugin will also delegate the feature to all elements in a
jqUITooltip
container by means of delegation.
This means that all elements contained in a
jqUITooltip
container will be tooltip-enabled.
By default any content of a
title
attribute will serve as the content for the tooltip displayed
when hovering over this element.
<div class="jqUITooltip">
* <a href="#" title="This is the tooltip content">hover me</a>
* <a href="#" title="This is the tooltip content">hover me</a>
* <a href="#" title="This is the tooltip content">hover me</a>
* <a href="#" title="This is the tooltip content">hover me</a>
</div>
Parameters
The plugin comes with a set of convenient parameters that can be specified using HTML5 data attributes. See the examples below.
Name |
Description |
Default |
track |
boolean flag to switch on/off the tooltip to follow the mouse pointer |
true |
theme |
specifies one of the predefined look&feel settings; possible values: default , transparent , info , error , help , frame |
default |
position |
specifies the position of the tooltip relative to the element it appears at; this can either be one of the standard position specifiers known to jQuery or one of the short-cuts bottom , top , left , right |
default |
duration |
duration of the animation to show/hide the tooltip |
200 |
delay |
milliseconds delay before the tooltip appears |
500 |
arrow |
boolean flag to display a small arrow next to the tooltip pointing to its root element |
false |
Examples
Use of HTML data attributes
<table class="foswikiLayoutTable jqUITooltip" data-theme="info" data-position="bottom" data-arrow="true" data-delay="0">
<tr>
<th>First Name:</th>
<th>Last Name:</th>
</tr>
<tr>
<td>
<input type="text" class="foswikiInputField" title="Please insert your first name" size="30" />
</td>
<td>
<input type="text" class="foswikiInputField" title="Please insert your last name" size="30" />
</td>
</tr>
</table>
Themes