Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (136 sloc) 6.421 kB
<?xml version="1.0"?>
<entry name="tooltip" type="widget" animated-element="tooltip" widget-element="original element">
<title>Tooltip Widget</title>
<desc>Customizable, themeable tooltips, replacing native tooltips.</desc>
<longdesc>
<p>Tooltip replaces native tooltips, making them themable as well as allowing various customizations:</p>
<ul>
<li>Display other content than just the title, like inline footnotes or extra content retrieved via Ajax.</li>
<li>Customize the positioning, e.g., to center the tooltip above elements.</li>
<li>Add extra styling to customize the appearance, for warning or error fields.</li>
</ul>
<p>A fade animation is used by default to show and hide the tooltip, making the appearance a bit more organic, compared to just toggling the visiblity. This can be customized with the <a href="#option-show"><code>show</code></a> and <a href="#option-hide"><code>hide</code></a> options.</p>
<p>The <a href="#option-items"><code>items</code></a> and <a href="#option-content"><code>content</code></a> options need to stay in-sync. If you change one of them, you need to change the other.</p>
</longdesc>
<note id="functional-css"/>
<added>1.9</added>
<options>
<option name="content" default="function returning the title attribute">
<desc>
<p>The content of the tooltip.</p>
<p><em>When changing this option, you likely need to also change the <a href="#option-items"><code>items</code></a> option.</em></p>
</desc>
<type name="Function">
<desc>A callback which can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content.</desc>
</type>
<type name="String">
<desc>A string of HTML to use for the tooltip content.</desc>
</type>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-option-hide.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="items" default="[title]">
<desc>
<p>A selector indicating which items should show tooltips. Customize if you're using something other then the title attribute for the tooltip content, or if you need a different selector for event delegation.</p>
<p><em>When changing this option, you likely need to also change the <a href="#option-content"><code>content</code></a> option.</em></p>
</desc>
<type name="Selector" />
</option>
<option name="position" default='{ my: "left+15 center", at: "right center", collision: "flipfit" }'>
<desc>Configuration for the Position utility. The <code>of</code> property defaults to the target element, but can also be overriden.</desc>
<type name="Object" />
</option>
<xi:include href="../includes/widget-option-show.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="tooltipClass" default="null">
<desc>
A class to add to the widget, can be used to display various tooltip types, like warnings or errors.
<p>This may get replaced by the <a href="http://bugs.jqueryui.com/ticket/7053">classes option</a>.</p>
</desc>
<type name="String" />
</option>
<option name="track" type="Boolean" default="false">
<desc>
Whether the tooltip should track (follow) the mouse.
</desc>
</option>
</options>
<methods>
<method name="close">
<desc>
Closes a tooltip. If the widget's element is the target, the event argument is optional. Otherwise you have to pass an event object with the <code>currentTarget</code> property pointing at the target.
</desc>
<argument name="event" type="Event" optional="true">
<desc>What triggered the tooltip to close.</desc>
</argument>
</method>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="open">
<desc>
Programmatically open a tooltip. If the widget's element is the target, the event argument is optional. Otherwise you have to pass an event object with the <code>currentTarget</code> property pointing at the target.
</desc>
<argument name="event" type="Event" optional="true">
<desc>What triggered the tooltip to open.</desc>
</argument>
</method>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="open" type="tooltipopen">
<desc>
Triggered when a tooltip is shown, triggered on <code>focusin</code> or <code>mouseover</code>.
</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="tooltip" type="jQuery">
<desc>The generated tooltip element.</desc>
</property>
</argument>
</event>
<event name="close" type="tooltipclose">
<desc>
Triggered when a tooltip is closed, triggered on <code>focusout</code> or <code>mouseleave</code>.
</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="tooltip" type="jQuery">
<desc>The generated tooltip element.</desc>
</property>
</argument>
</event>
</events>
<example>
<height>80</height>
<desc>Create a tooltip on the document, using event delegation for all elements with a title attribute.</desc>
<code><![CDATA[
$( document ).tooltip();
]]></code>
<html><![CDATA[
<p>
<a href="#" title="Anchor description">Anchor text</a>
<input title="Input help">
</p>]]></html>
</example>
<example>
<height>300</height>
<desc>Create a tooltip on the paragraph element, matching all images with an alt attribute. Use the alt attribute as the tooltip's content for each image.</desc>
<code><![CDATA[
$( "p" ).tooltip({
items: "img[alt]",
content: function() {
return $( this ).attr( "alt" );
}
});
]]></code>
<html><![CDATA[
<p>
<img src="/resources/images/st-stephens.jpg" alt="St. Stephen's Cathedral">
<img src="/resources/images/tower-bridge.jpg" alt="Tower Bridge">
</p>
]]></html>
</example>
<category slug="widgets"/>
</entry>
Jump to Line
Something went wrong with that request. Please try again.