YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Container Family: One Tooltip, Many Context Elements

# Container Family: One Tooltip, Many Context Elements

In the example below, a single Tooltip instance is used to display tooltips for multiple context elements.

1. For one set of links (Group A), the Tooltip text is provided by the title attribute of the link
2. For the other set (Group B), we'll use context related events to set the text property just before the the tooltip is displayed for each link

View example in new window.

Group A: Single Tooltip, text set using title
Group B: Single Tootip, text set using events

## Setting up the Tooltip

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:

// Obtain an array of the links in Group A var groupAIds = createTitledLinks(); // For links in group A which all have titles, this is all we need. // The tooltip text for each context element will be set from the title attribute. // We'll also setup Tooltip A to use the FADE ContainerEffect var ttA = new YAHOO.widget.Tooltip("ttA", { context:groupAIds, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.20} });

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:

// Obtain an array of the links in Group B var groupBIds = createUntitledLinks(); // For links in group B, we'll set the tooltip text dynamically, // right before the tooltip is triggered, using the id of the triggering context. var ttB = new YAHOO.widget.Tooltip("ttB", { context:groupBIds }); // Set the text for the tooltip just before we display it. ttB.contextTriggerEvent.subscribe( function(type, args) { var context = args[0]; this.cfg.setProperty("text", "Tooltip for " + context.id + ", set using contextTriggerEvent"); } );

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.

// Stop the tooltip from being displayed for link B3. ttB.contextMouseOverEvent.subscribe( function(type, args) { var context = args[0]; if (context && context.id == "B3") { return false; } else { return true; } } );

## Configuration for This Example

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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Container Family Examples:

- The Module Control
- Creating and Positioning an Overlay
- Simple Tooltip Example
- One Tooltip, Many Context Elements
- Simple Panel Example
- Skinning a Panel with Custom CSS: Introduction
- Skinning a Panel with Custom CSS: Advanced
- Creating a Modal "Loading" Panel
- Creating a Resizable Panel
- Dialog Quickstart Example
- SimpleDialog Quickstart Example
- Using ContainerEffect Transitions
- Using the Overlay Manager to Manage Multiple Panels
- Implementing Container Keyboard Shortcuts with KeyListener
- Using the Button ARIA Plugin (included with examples for Button Control)
- Using the Container ARIA Plugin
- Using A Menu Button To Replace A <select> Element (included with examples for Button Control)
- Replacing the content of a Button's Menu (included with examples for Button Control)
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Editor in a Dialog Control (included with examples for Rich Text Editor)
- Menu Buttons (included with examples for Button Control)
- Popup Calendar - Advanced (included with examples for Calendar Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Split Buttons (included with examples for Button Control)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Color Picker Button (included with examples for Button Control)
- Fixed Width Menu Button (included with examples for Button Control)
- OS-Style Programs Menu (included with examples for Menu Family)
- Application Menubar (included with examples for Menu Family)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### More Container Family Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings