Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 135 lines (130 sloc) 6.114 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
<?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" example-value='"Awesome title!"'>
<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]" example-value='"img[alt]"'>
<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" }' example-value='{ my: "center top", at: "center bottom+5" }'>
<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" example-value='"custom-tooltip-styling"'>
<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" example-value="true">
<desc>
Whether the tooltip should track (follow) the mouse.
</desc>
</option>
</options>
<methods>
<method name="close">
<desc>
Closes a tooltip. This is only intended to be called for non-delegated tooltips.
</desc>
</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. This is only intended to be called for non-delegated tooltips.
</desc>
</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>
Something went wrong with that request. Please try again.