JQueryUITooltip

Summary

Homepage: http://api.jqueryui.com/tooltip/
Author(s): see http://jqueryui.com/about
Version: 1.13.2

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
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
theme	specifies one of the predefined look&feel settings; possible values: default, transparent, info, error, help, frame	default
delay	milliseconds delay before the tooltip appears	500
duration	duration of the animation to show/hide the tooltip	200
track	boolean flag to switch on/off the tooltip to follow the mouse pointer	true
arrow	boolean flag to display a small arrow next to the tooltip pointing to its root element

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>

First Name:	Last Name:

Themes

Default:
Transparent:
Info:
Error:
Help:
Frame: