<style type="text/css" scoped>

/* Hide overlay markup while loading, if js is enabled */

.yui3-js-enabled .yui3-overlay-loading {

top:-1000em;

left:-1000em;

position:absolute;

}

/* Example Layout CSS */

</style>

<div class="intro">

<p>This example demonstrates a lightweight and flexible setup for display

of tooltips.</p>

<p>This displays the tooltip adjacent to the cursor

and takes advantage of the shim capabilities of `Overlay`,

allowing the tooltip to properly display over `select` elements in IE.</p>

</div>

<div class="example">

{{>overlay-tooltip-source}}

</div>

<h2>Simple Tooltips</h2>

<h3>The Tooltip Markup</h3>

<p>We just need a `div` for the tooltip, and some elements that want to

have tooltips.</p>

```

<div id="tooltip"></div>

<ul class="list">

<li class="wrench"><img src="{{{componentAssets}}}/img/wrench.png"/></li>

<li class="calipers"><img src="{{{componentAssets}}}/img/calipers.png"/></li>

<li class="drill"><img src="{{{componentAssets}}}/img/drill.png"/></li>

<li class="ohm"><img src="{{{componentAssets}}}/img/ohm.png"/></li>

<li class="level"><img src="{{{componentAssets}}}/img/level.png"/></li>

</ul>

```

<h3>Setting Up the YUI Instance</h3>

<p>We'll use the `Overlay` module to provide shimming for correctly covering

`<select>` elements in IE. We'll use `Event` for its `onmouseleave` event, and

`widget-anim` as a plugin to provide the fade-in for the tooltip.

</p>

```

YUI().use('overlay', 'event', 'widget-anim', function (Y) {

// code will go here.

});

```

<h3>Declare some variables</h3>

<p>These variables include an array of strings for various tooltips.

If a DOM element has a class matching one of the `name` values in the `tipText` array,

it will display the corresponding text value in its tooltip when the cursor moves

over it.

</p>

```

{{>overlay-tooltip-js-vars}}

```

<h3>Instantiating The Tooltip</h3>

<p>To create an overlay instance for the tooltip,

we use the overlay constructor `Y.Overlay`, specifying the source node

as the selector of the tooltip element.

</p>

```

{{>overlay-tooltip-js-instance}}

```

<h3>Event Handlers</h3>

<p>

Create event handlers for the mouse events

and place them above the listeners code.

</p>

```

{{>overlay-tooltip-js-handlers}}

```

<h3>Event Listeners</h3>

<p>

Add listeners for `mousemove` and `mouseout` events

to whatever elements you want to have tooltips.

Using `mousemove` instead of `mouseover`, and using a `delay` in the `transition`

makes the tooltip fade in adjacent to the cursor.

See <a href="../event/index.html#delegation">event delegation</a> for efficient

event subscribing to multiple elements.

</p>

```

{{>overlay-tooltip-js-listeners}}

```

<p>

This example demonstrates how you can use the existing Overlay component

to create a one-off Tooltip for your page.

If you plan to re-use the Tooltip on multiple pages,

or in a variety of use cases, it's a good idea to encapsulate

all the code which makes a tooltip work into a reusable Widget class.

The example,

<a href="../widget/widget-tooltip.html">Creating a Simple Tooltip Widget with Extensions</a>,

shows how you can create a reusable, flexible Tooltip class.

</p>

<h3>Complete Example Source</h3>

```

{{>overlay-tooltip-source}}

```