Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Tooltip: Cleanup.

  • Loading branch information...
commit 2edf783ae8887d68debb92471ea2e55a8f8f3bd2 1 parent f2a0b66
@scottgonzalez scottgonzalez authored
Showing with 38 additions and 76 deletions.
  1. +38 −76 entries/tooltip.xml
View
114 entries/tooltip.xml
@@ -1,21 +1,19 @@
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
<entry name="tooltip" namespace="fn" type="Widget" widgetnamespace="ui">
- <desc>
- Customizable, themeable tooltips, replacing native tooltips.
- </desc>
+ <desc>Customizable, themeable tooltips, replacing native tooltips.</desc>
<longdesc>
- <p>Tooltip replaces native tooltips, making them themable as well as allowing various customizations:</p>
+ <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, eg. to center the tooltip above elements</li>
- <li>add extra classes to customize the appearance, for warning or error fields</li>
+ <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 <code>show</code> and <code>hide</code> options.</p>
+ <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 <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>
+ <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>
<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>
</longdesc>
@@ -23,9 +21,9 @@
<options>
<option name="content" default="function returning the title attribute">
<desc>
- 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.
+ The content of the tooltip. The callback can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content.
- When changing this option, you likely need to also change the items option.</desc>
+ When changing this option, you likely need to also change the <a href="#option-items"><code>items</code></a> option.</desc>
<type name="Function" />
<!-- FIXME
<example>
@@ -40,49 +38,23 @@
<desc>How to hide the tooltip.</desc>
<type name="Boolean" />
<type name="Object" />
- <!-- FIXME
- <example>
- {
- effect: 'explode',
- delay: 250
- }
- </example>
- -->
</option>
<option name="items" default="[title]">
<desc>
- 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.
+ 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.
- When changing this option, you likely need to also change the content option.
+ When changing this option, you likely need to also change the <a href="#option-content"><code>content</code></a> option.
</desc>
<type name="Selector" />
- <!-- FIXME
- <example>
- '.tooltipped'
- </example>
- -->
</option>
- <option name="position" default="{ my: 'left+15 center', at: 'right center', collision: 'flipfit flipfit' }">
- <desc>Configuration for the Position utility. The of property defaults to the target element, but can also be overriden.</desc>
+ <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" />
- <!-- FIXME
- <example>
- { my: 'center' }
- </example>
- -->
</option>
<option name="show" default="true">
<desc>How to show the tooltip.</desc>
<type name="Boolean" />
<type name="Object" />
- <!-- FIXME
- <example>
- {
- effect: 'slideDown',
- delay: 250
- }
- </example>
- -->
</option>
<option name="tooltipClass" default="null">
<desc>
@@ -90,11 +62,6 @@
<p>This may get replaced by the <a href="http://bugs.jqueryui.com/ticket/7053">classes option</a>.</p>
</desc>
<type name="String" />
- <!-- FIXME
- <example>
- 'ui-state-highlight'
- </example>
- -->
</option>
<option name="track" type="Boolean" default="false">
<desc>
@@ -105,10 +72,10 @@
<methods>
<method name="close">
<desc>
- Programmatically close a tooltip. Sames rules as for <code>open</code> method.
+ 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 method.</desc>
+ <desc>What triggered the tooltip to close.</desc>
</argument>
</method>
<widget-inherit id="widget-destroy" />
@@ -119,7 +86,7 @@
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 method.</desc>
+ <desc>What triggered the tooltip to open.</desc>
</argument>
</method>
<widget-inherit id="widget-get-options" />
@@ -132,61 +99,56 @@
<widget-inherit id="widget-create" />
<event name="open" type="tooltipopen">
<desc>
- Triggered when a tooltip is shown, triggered on focusin or mouseover.
-
- Can be used further modify or position the widget, eg. have it follow the mouse movement.
+ Triggered when a tooltip is shown, triggered on <code>focusin</code> or <code>mouseover</code>.
</desc>
<argument name="event" type="Event" null="true">
</argument>
<argument name="ui" type="Object">
- <desc>
- Extra event data for the ui tooltip open event
- </desc>
<property name="tooltip" type="jQuery">
- <desc>The generated tooltip element</desc>
+ <desc>The generated tooltip element.</desc>
</property>
</argument>
</event>
<event name="close" type="tooltipclose">
<desc>
- Triggered when a tooltip is shown, triggered on focusin or mouseover.
+ Triggered when a tooltip is closed, triggered on <code>focusout</code> or <code>mouseleave</code>.
</desc>
<argument name="event" type="Event" null="true">
</argument>
<argument name="ui" type="Object">
- <desc>
- Extra event data for the ui tooltip open event
- </desc>
<property name="tooltip" type="jQuery">
- <desc>The generated tooltip element</desc>
+ <desc>The generated tooltip element.</desc>
</property>
</argument>
</event>
</events>
<example>
- <desc>Create a tooltip on the document, using event delegation for all elements with a title attribute.</desc>
- <code><![CDATA[
- $(document).tooltip();
+ <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>
+ <html><![CDATA[
+<p>
<a href="#" title="Anchor description">Anchor text</a>
- <input title="Input help" />
+ <input title="Input help">
</p>]]></html>
</example>
<example>
- <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" );
- }
- });
+ <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>
+ <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>
+</p>
+]]></html>
</example>
<category slug="widgets"/>
</entry>
Please sign in to comment.
Something went wrong with that request. Please try again.