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 DescriptionSorted descending 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:

This topic: System > JQueryPlugin > JQueryUITooltip
Topic revision: 27 Jul 2017, AdminUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback