JQueryUITooltip

On this page:

Summary

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

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: