Skip Navigation Services Work Apps Blog Contact

YUI Tooltip

YUI Tooltip is a YUI3 widget that allows you to easily add an animated tooltip to any element on a web page.

Simply give an HTML element a “tooltip” attribute, and set the attribute to the content you’d like YUI Tooltip to display when the element is hovered on. You can use any HTML you want in a tooltip so long as it is properly escaped.

You can also align your tooltips using the “tooltip:alignment” attribute, with a value of “top”, “right”, “bottom”, or “left”. The tooltip will align itself to the center of the corresponding edge of the element.

YUI Tooltip is lightweight, supports all major browsers, and is fully skinnable.

Download
Demo
Tutorial
Skinning

Download

YUI Tooltip is hosted on the Yahoo! CDN as part of the YUI Gallery, so there is no need to download the script. If you’d like, you can grab the source and fork the project at GitHub.

Demo:

Move your mouse over the colored boxes to see YUI Tooltip in action.

<div tooltip="&lt;p&gt;This box is red.&lt;/p&gt;" tooltip:alignment="top"></div>
<div tooltip="&lt;p&gt;This box is green.&lt;/p&gt;" tooltip:alignment="left"></div>
<div tooltip="&lt;p&gt;This box is blue.&lt;/p&gt;" tooltip:alignment="right"></div>
<div tooltip="&lt;p&gt;This box is black.&lt;/p&gt;" tooltip:alignment="bottom"></div>

Download
Demo
Tutorial
Skinning