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 contextMouseOverEvent
and 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:
1 | // Obtain an array of the links in Group A |
2 | var groupAIds = createTitledLinks(); |
3 | |
4 | // For links in group A which all have titles, this is all we need. |
5 | // The tooltip text for each context element will be set from the title attribute. |
6 | |
7 | // We'll also setup Tooltip A to use the FADE ContainerEffect |
8 | var ttA = new YAHOO.widget.Tooltip("ttA", { |
9 | context:groupAIds, |
10 | effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.20} |
11 | }); |
view plain | print | ? |
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:
1 | // Obtain an array of the links in Group B |
2 | var groupBIds = createUntitledLinks(); |
3 | |
4 | // For links in group B, we'll set the tooltip text dynamically, |
5 | // right before the tooltip is triggered, using the id of the triggering context. |
6 | var ttB = new YAHOO.widget.Tooltip("ttB", { |
7 | context:groupBIds |
8 | }); |
9 | |
10 | // Set the text for the tooltip just before we display it. |
11 | ttB.contextTriggerEvent.subscribe( |
12 | function(type, args) { |
13 | var context = args[0]; |
14 | this.cfg.setProperty("text", "Tooltip for " + context.id + ", set using contextTriggerEvent"); |
15 | } |
16 | ); |
view plain | print | ? |
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.
1 | // Stop the tooltip from being displayed for link B3. |
2 | ttB.contextMouseOverEvent.subscribe( |
3 | function(type, args) { |
4 | var context = args[0]; |
5 | if (context && context.id == "B3") { |
6 | return false; |
7 | } else { |
8 | return true; |
9 | } |
10 | } |
11 | ); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings