JQueryUITooltip

Summary

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.

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