Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 214 lines (206 sloc) 7.059 kb
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
1 <?xml version="1.0"?>
2 <?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
3 <entry name="tooltip" namespace="fn" type="Widget" widgetnamespace="ui">
4 <desc>
5 Customizable, themeable tooltips, replacing native tooltips.
6 </desc>
7 <longdesc>
8 <p>Tooltip replaces native tooltips, making them themable as well as allowing various customizations:</p>
9
10 <ul>
11 <li>display other content than just the title, like inline footnotes or extra content retrieved via Ajax</li>
12 <li>customize the positioning, eg. to center the tooltip above elements</li>
13 <li>add extra classes to customize the appearance, for warning or error fields</li>
14 </ul>
15
16 <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 <code>show</code> and <code>hide</code> options.</p>
17
18 <p>The <code>title</code> and <code>content</code> options need to stay in-sync. If you change one of them, you need to change the other.</p>
0add1d7 @jzaefferer Add note about functional CSS to all widgets and two interactions. Al…
jzaefferer authored
19
20 <p>This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.</p>
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
21 </longdesc>
22 <created>1.9</created>
23 <options>
24 <option name="content" default="function returning the title attribute">
25 <desc>
26 The content of the tooltip. The callback can either return the content directly, or call the first argument, passing in the content, eg. for ajax content.
27
28 When changing this option, you likely need to also change the items option.</desc>
29 <type name="Function" />
30 <example>
31 function(response) {
32 $.getJSON("tooltipcontent.html", response);
33 }
34 </example>
35 </option>
36 <option name="disabled" type="Boolean" default="false">
37 <desc>Disables the tooltip if set to true.</desc>
38 </option>
39 <option name="hide" default="true">
40 <desc>How to hide the tooltip.</desc>
41 <type name="Boolean" />
42 <type name="Object" />
43 <example>
44 {
45 effect: 'explode',
46 delay: 250
47 }
48 </example>
49 </option>
50 <option name="items" default="[title]">
51 <desc>
52 A selector matched when activating a tooltip. 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.
53
54 When changing this option, you likely need to also change the content option.
55 </desc>
56 <type name="Selector" />
57 <example>
58 '.tooltipped'
59 </example>
60 </option>
bb7c1f0 @jzaefferer Tooltip: Fix position option default
jzaefferer authored
61 <option name="position" default="{ my: 'left+15 center', at: 'right center', collision: 'flipfit flipfit' }">
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
62 <desc>Configuration for the Position utility. The of property defaults to the target element, but can also be overriden.</desc>
63 <type name="Object" />
64 <example>
65 { my: 'center' }
66 </example>
67 </option>
68 <option name="show" default="true">
69 <desc>How to show the tooltip.</desc>
70 <type name="Boolean" />
71 <type name="Object" />
72 <example>
73 {
74 effect: 'slideDown',
75 delay: 250
76 }
77 </example>
78 </option>
79 <option name="tooltipClass" default="null">
80 <desc>
81 A class to add to the widget, can be used to display various tooltip types, like warnings or errors.
bc7d205 @jzaefferer Tooltip: Document track option. Fixes #9
jzaefferer authored
82 <p>This may get replaced by the <a href="http://bugs.jqueryui.com/ticket/7053">classes option</a>.</p>
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
83 </desc>
84 <type name="String" />
85 <example>
86 'ui-state-highlight'
87 </example>
88 </option>
bc7d205 @jzaefferer Tooltip: Document track option. Fixes #9
jzaefferer authored
89 <option name="track" type="Boolean" default="false">
90 <desc>
91 Whether the tooltip should track (follow) the mouse.
92 </desc>
93 </option>
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
94 </options>
95 <methods>
96 <method name="close">
97 <desc>
98 Programmatically close a tooltip. Sames rules as for <code>open</code> method.
99 </desc>
100 <argument name="event" type="Event" optional="true">
101 <desc>What triggered the method.</desc>
102 </argument>
103 </method>
104 <method name="disable">
105 <desc>
106 Disable the tooltip.
107 </desc>
108 </method>
109 <method name="enable">
110 <desc>
111 Enable the tooltip.
112 </desc>
113 </method>
114 <method name="open">
115 <desc>
116 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.
117 </desc>
118 <argument name="event" type="Event" optional="true">
119 <desc>What triggered the method.</desc>
120 </argument>
121 </method>
122 <method name="option">
123 <desc>
124 Get or set any tooltip option. If no value is specified, will act as a getter.
125 </desc>
126 <argument name="optionName" type="String">
127 </argument>
128 <argument name="value" type="Object" optional="true">
129 </argument>
130 </method>
131 <method name="option">
132 <desc>
133 Set multiple tooltip options at once by providing an options object.
134 </desc>
135 <argument name="options" type="Object">
136 </argument>
137 </method>
138 <method name="widget">
139 <desc>
140 Returns the widget
141 </desc>
142 </method>
143 </methods>
144 <events>
145 <event name="create">
146 <desc>
147 This event is triggered when the tooltip is created.
148 </desc>
149 <argument name="event" type="Event">
150 </argument>
151 <argument name="ui" type="Object">
152 </argument>
153 </event>
154 <event name="open" type="tooltipopen">
155 <desc>
156 Triggered when a tooltip is shown, triggered on focusin or mouseover.
157
158 Can be used further modify or position the widget, eg. have it follow the mouse movement.
159 </desc>
160 <argument name="event" type="Event" null="true">
161 </argument>
162 <argument name="ui" type="Object">
163 <desc>
164 Extra event data for the ui tooltip open event
165 </desc>
166 <property name="tooltip" type="jQuery">
167 <desc>The generated tooltip element</desc>
168 </property>
169 </argument>
170 </event>
171 <event name="close" type="tooltipclose">
172 <desc>
173 Triggered when a tooltip is shown, triggered on focusin or mouseover.
174 </desc>
175 <argument name="event" type="Event" null="true">
176 </argument>
177 <argument name="ui" type="Object">
178 <desc>
179 Extra event data for the ui tooltip open event
180 </desc>
181 <property name="tooltip" type="jQuery">
182 <desc>The generated tooltip element</desc>
183 </property>
184 </argument>
185 </event>
186 </events>
187 <example>
188 <desc>Create a tooltip on the document, using event delegation for all elements with a title attribute.</desc>
189 <code><![CDATA[
190 $(document).tooltip();
191 ]]></code>
192 <html><![CDATA[<p>
193 <a href="#" title="Anchor description">Anchor text</a>
194 <input title="Input help" />
195 </p>]]></html>
196 </example>
197 <example>
198 <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>
199 <code><![CDATA[
200 $("p").tooltip({
201 items: "img[alt]",
202 content: function() {
203 return $( this ).attr( "alt" );
204 }
205 });
206 ]]></code>
207 <html><![CDATA[<p>
208 <img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral">
209 <img src="images/tower-bridge.jpg" alt="Tower Bridge">
210 </p>]]></html>
211 </example>
dbad908 @jzaefferer Add missing categories and fix the uncategorized category, needs uppe…
jzaefferer authored
212 <category slug="widgets"/>
2cfe0ed @jzaefferer Tooltip: Import from jquery-docs, include widget-inherited methods
jzaefferer authored
213 </entry>
Something went wrong with that request. Please try again.