Setting up the Tooltip

Tooltip can also be configured to reuse one 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 25 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:

var contextElements = []; for (var i=1;i<=25;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 } );