JQueryUITooltip

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
arrow	boolean flag to display a small arrow next to the tooltip pointing to its root element	false
delay	milliseconds delay before the tooltip appears	500
duration	duration of the animation to show/hide the tooltip	200
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
track	boolean flag to switch on/off the tooltip to follow the mouse pointer	true

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: