JQueryUITooltip

Summary

Usage

To load the library into the current wiki page, add this somewhere on the page:

%JQREQUIRE{"ui::tooltip"}%
Error: no such plugin 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 DefaultSorted ascending
arrow boolean flag to display a small arrow next to the tooltip pointing to its root element
duration duration of the animation to show/hide the tooltip 200
delay milliseconds delay before the tooltip appears 500
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:

This topic: System > JQueryPlugin > JQueryUITooltip
Topic revision: 27 Sep 2013, ProjectContributor
 
This site is powered by FoswikiCopyright © CC-BY-SA by the contributing authors. All material on this collaboration platform is copyrighted under CC-BY-SA by the contributing authors unless otherwise noted.
Ideas, requests, problems regarding Foswiki? Send feedback