Permalink
Browse files

Tooltip: Import from jquery-docs, include widget-inherited methods

  • Loading branch information...
1 parent fd3c069 commit 2cfe0edbe735f466ed2ac7bdb7b87792735d9093 @jzaefferer jzaefferer committed May 28, 2012
Showing with 209 additions and 0 deletions.
  1. +209 −0 entries/tooltip.xml
View
@@ -0,0 +1,209 @@
+<?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>
+ <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, eg. to center the tooltip above elements</li>
+ <li>add extra classes 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>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>
+ </longdesc>
+ <created>1.9</created>
+ <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.
+
+ When changing this option, you likely need to also change the items option.</desc>
+ <type name="Function" />
+ <example>
+ function(response) {
+ $.getJSON("tooltipcontent.html", response);
+ }
+ </example>
+ </option>
+ <option name="disabled" type="Boolean" default="false">
+ <desc>Disables the tooltip if set to true.</desc>
+ </option>
+ <option name="hide" default="true">
+ <desc>How to hide the tooltip.</desc>
+ <type name="Boolean" />
+ <type name="Object" />
+ <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.
+
+ When changing this option, you likely need to also change the content option.
+ </desc>
+ <type name="Selector" />
+ <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>
+ <type name="Object" />
+ <example>
+ { my: 'center' }
+ </example>
+ </option>
+ <option name="show" default="true">
+ <desc>How to show the tooltip.</desc>
+ <type name="Boolean" />
+ <type name="Object" />
+ <example>
+ {
+ effect: 'slideDown',
+ delay: 250
+ }
+ </example>
+ </option>
+ <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.
+
+ This may get replaced by the <a href="http://bugs.jqueryui.com/ticket/7053">classes option</a>.
+ </desc>
+ <type name="String" />
+ <example>
+ 'ui-state-highlight'
+ </example>
+ </option>
+ </options>
+ <methods>
+ <method name="close">
+ <desc>
+ Programmatically close a tooltip. Sames rules as for <code>open</code> method.
+ </desc>
+ <argument name="event" type="Event" optional="true">
+ <desc>What triggered the method.</desc>
+ </argument>
+ </method>
+ <method name="disable">
+ <desc>
+ Disable the tooltip.
+ </desc>
+ </method>
+ <method name="enable">
+ <desc>
+ Enable the tooltip.
+ </desc>
+ </method>
+ <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 method.</desc>
+ </argument>
+ </method>
+ <method name="option">
+ <desc>
+ Get or set any tooltip option. If no value is specified, will act as a getter.
+ </desc>
+ <argument name="optionName" type="String">
+ </argument>
+ <argument name="value" type="Object" optional="true">
+ </argument>
+ </method>
+ <method name="option">
+ <desc>
+ Set multiple tooltip options at once by providing an options object.
+ </desc>
+ <argument name="options" type="Object">
+ </argument>
+ </method>
+ <method name="widget">
+ <desc>
+ Returns the widget
+ </desc>
+ </method>
+ </methods>
+ <events>
+ <event name="create">
+ <desc>
+ This event is triggered when the tooltip is created.
+ </desc>
+ <argument name="event" type="Event">
+ </argument>
+ <argument name="ui" type="Object">
+ </argument>
+ </event>
+ <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.
+ </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>
+ </property>
+ </argument>
+ </event>
+ <event name="close" type="tooltipclose">
+ <desc>
+ Triggered when a tooltip is shown, triggered on focusin or mouseover.
+ </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>
+ </property>
+ </argument>
+ </event>
+ </events>
+ <theming>
+ TODO
+ </theming>
+ <example>
+ <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>
+ <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="images/st-stephens.jpg" alt="St. Stephen's Cathedral">
+ <img src="images/tower-bridge.jpg" alt="Tower Bridge">
+</p>]]></html>
+ </example>
+</entry>

0 comments on commit 2cfe0ed

Please sign in to comment.