<style>
/* 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}}
```
