In the example below, a single Tooltip instance is used to display tooltips for multiple context elements.
Tooltip can be configured to reuse a single Tooltip for multiple context elements with
title attributes — by default, Tooltip will autopopulate its
text configuration property with the contents of its context element's
title attribute. Reuse of Tooltip instances is an advisable performance enhancement strategy, especially when you have a large number of context elements that need to invoke Tooltips.
However for certain use cases, you may want to set the text of the tooltip dynamically. You can use the context based events tooltip provides, in particular the
contextTriggerEvent to set the shared tooltip's text directly based on the context element the tooltip is about to be displayed for. The
contextMouseOverEvent can also be used to stop the Tooltip from being displayed
In this tutorial, we will dynamically create two groups of 5 links (Group A and Group B). We'll attach one Tooltip instance to the links in Group A a second Tooltip instance to the links in Group B by setting the
context property to the array of link ids for that group.
Group A: For Group A we'll set the title attribute on each of the links, to drive the tooltip's text:
Group B: For Group B we won't set titles on the links, but instead use the
contextTriggerEvent to set the tooltip's text directly. The context element is available as the first entry of the
args array passed to the listener:
We'll also use the
contextMouseOverEvent to stop the 3rd link from showing a tooltip, by returning
false from the handler. We could also set the
disabled property for the Tooltip, but then we'd need to re-enable it for the other context elements.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.