Yahoo! Developer Network Home - Help

YDN Site Search

# 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 create tooltips for each link in the list.

View example in new window.

## 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.

In this tutorial, we will dynamically create many links, and then associate a single Tooltip with all of the generated links. This is achieved by setting the `context` property to an array of element ids (see the last line in the code block below, where `contextElements` is an array of element ids).

var contextElements = []; for (var i=1;i<=11;i++) { var a = document.createElement("a"); a.id = "link" + i; a.href = "http://www.yahoo.com/"; a.title = "This is link number " + i; a.innerHTML = i + ". Hover over me to see my Tooltip"; document.body.appendChild(a); document.body.appendChild(document.createElement("br")); document.body.appendChild(document.createElement("br")); contextElements[contextElements.length] = a.id; } YAHOO.example.container.tt = new YAHOO.widget.Tooltip("tt", { context:contextElements } );

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### 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 "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
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control (beta))
- Calendar inside a Container (included with examples for Calendar Control)
- Menu Buttons (included with examples for Button Control)
- Split Buttons (included with examples for Button Control)
- Calendar Menu Button (included with examples for Button Control)
- Calendar Split Button (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)

### More Container Family Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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