Example: Simple Tooltip

This example demonstrates a lightweight and flexible setup for display of tooltips.

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.

Tooltips cover elements in IE.

Simple Tooltips

The Tooltip Markup

We just need a div for the tooltip, and some elements that want to have tooltips.

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

<ul class="list">
    <li class="wrench"><img src="../assets/overlay/img/wrench.png"/></li>
    <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
    <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
    <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
    <li class="level"><img src="../assets/overlay/img/level.png"/></li>
</ul>

Setting Up the YUI Instance

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.

YUI().use('overlay', 'event', 'widget-anim', function (Y) {
    // code will go here.
});

Declare some variables

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.

var waitingToShow = false,
    
    // array for text to be displayed in tooltips
    tipText = [
        {'name': 'wrench', 'text': "Avoid dropping on toe."},
        {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
        {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
        {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
        {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'}
        // the array continues...
    ];

Instantiating The Tooltip

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.

var tooltip = new Y.Overlay({
    srcNode: "#tooltip",
    visible: false
}).plug(Y.Plugin.WidgetAnim);
tooltip.anim.get('animHide').set('duration', 0.01);
tooltip.anim.get('animShow').set('duration', 0.3);
tooltip.render();

Event Handlers

Create event handlers for the mouse events and place them above the listeners code.

// handler that positions and shows the tooltip 
var onMousemove = function (e) {
    var i;
    if (tooltip.get('visible') === false) {
        // while it's still hidden, move the tooltip adjacent to the cursor
        Y.one('#tooltip').setStyle('opacity', '0');
        tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
    }
    if (waitingToShow === false) {
        // wait half a second, then show tooltip
        setTimeout(function(){
            Y.one('#tooltip').setStyle('opacity', '1');
            tooltip.show();
        }, 500);
        
        // while waiting to show tooltip, don't let other
        // mousemoves try to show tooltip too.
        waitingToShow = true;
        
        // loop through the tipText array looking for a match between
        // the class name and the array literal `name`
        for (i = 0; i < tipText.length; i += 1) {
            if (e.currentTarget.hasClass(tipText[i].name)) {

                // found a match, so set the content in the tooltip's body
                tooltip.setStdModContent('body', tipText[i].text);
                break;
            }
        }
    }
}

// handler that hides the tooltip
var onMouseleave = function (e) {

    // this check prevents hiding the tooltip 
    // when the cursor moves over the tooltip itself
    if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
        tooltip.hide();
        waitingToShow = false;            
    }
}

Event Listeners

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 event delegation for efficient event subscribing to multiple elements.

Y.delegate('mousemove', onMousemove, '.lists', 'li');
Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
Y.one('#tooltip').on('mouseleave', onMouseleave);

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, Creating a Simple Tooltip Widget with Extensions, shows how you can create a reusable, flexible Tooltip class.

Complete Example Source

<style>
    .example .lists {
        margin: 10px auto;  /*center in viewport*/
    }

    .example .list {
        -moz-padding-start: 0;
        -webkit-padding-start: 0;
        width: 300px;
        margin: 0;
    }

    .example #tooltip .yui3-widget-bd{
        text-align: left;
        max-width: 15em;
        *width: 10em;
        background-color: #FFF6D5;
        border: solid 1px #aa8;
        padding: 0.2em 0.5em 0.3em;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
        -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
    }

    .example .list li{
        list-style: none;
        margin: 0 0 20px;
        border: 1px solid #C9C9C9;
        width: 300px;
    }

    .example .list img{
        vertical-align: bottom;
    }

    .example .list .select{
        padding: 1.5em 0 0.5em;
        text-indent: 0.5em;
        background-color: #F7DBB2;
    }

</style>

<body class="yui3-skin-sam">
    <div id="tooltip"></div>
    
    <div class="yui3-g lists">
        <div class="yui3-u-1-2"> <!-- see CSS Grids -->
            <ul class="list">
                <li class="wrench"><img src="../assets/overlay/img/wrench.png"></li>
                <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
                <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
                <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
                <li class="level"><img src="../assets/overlay/img/level.png"/></li>
            </ul>
        </div>
        <div class="yui3-u">
            <ul class="list">
                <li class="endwrench"><img src="../assets/overlay/img/endwrench.png"/></li>
                <li class="knife"><img src="../assets/overlay/img/knife.png"/></li>
                <li class="scissors"><img src="../assets/overlay/img/scissors.png"/></li>
                <li class="screwdriver"><img src="../assets/overlay/img/screwdriver.png"/></li>
                <li class="tape"><img src="../assets/overlay/img/tape.png"/></li>
                <li class="select">Tooltips cover <select><option>select</option></select> elements in IE.</li>
            </ul>
        </div>
    </div>

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

    var waitingToShow = false,
        
        // array for text to be displayed in tooltips
        tipText = [
            {'name': 'wrench', 'text': "Avoid dropping on toe."},
            {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
            {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
            {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
            {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'},
            {'name': 'endwrench', 'text': '11/16 box-end wrench A.K.A spanner - (British)'},
            {'name': 'knife', 'text': 'Wants to roll off table and stick in foot.'},
            {'name': 'scissors', 'text': "Don't run with these."},
            {'name': 'screwdriver', 'text': 'Not intended for garden weeding.'},
            {'name': 'tape', 'text': 'Remove before cutting.'},
            {'name': 'select', 'text': 'Covering select'}
        ];

    var tooltip = new Y.Overlay({
        srcNode: "#tooltip",
        visible: false
    }).plug(Y.Plugin.WidgetAnim);
    tooltip.anim.get('animHide').set('duration', 0.01);
    tooltip.anim.get('animShow').set('duration', 0.3);
    tooltip.render();

    // handler that positions and shows the tooltip 
    var onMousemove = function (e) {
        var i;
        if (tooltip.get('visible') === false) {
            // while it's still hidden, move the tooltip adjacent to the cursor
            Y.one('#tooltip').setStyle('opacity', '0');
            tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
        }
        if (waitingToShow === false) {
            // wait half a second, then show tooltip
            setTimeout(function(){
                Y.one('#tooltip').setStyle('opacity', '1');
                tooltip.show();
            }, 500);
            
            // while waiting to show tooltip, don't let other
            // mousemoves try to show tooltip too.
            waitingToShow = true;
            
            // loop through the tipText array looking for a match between
            // the class name and the array literal `name`
            for (i = 0; i < tipText.length; i += 1) {
                if (e.currentTarget.hasClass(tipText[i].name)) {

                    // found a match, so set the content in the tooltip's body
                    tooltip.setStdModContent('body', tipText[i].text);
                    break;
                }
            }
        }
    }

    // handler that hides the tooltip
    var onMouseleave = function (e) {

        // this check prevents hiding the tooltip 
        // when the cursor moves over the tooltip itself
        if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
            tooltip.hide();
            waitingToShow = false;            
        }
    }

    Y.delegate('mousemove', onMousemove, '.lists', 'li');
    Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
    Y.one('#tooltip').on('mouseleave', onMouseleave);

});
</script>
</body>