A jQuery doTimeout Example

http://benalman.com/projects/jquery-dotimeout-plugin/

by justi

HTML

<script src="http://benalman.com/code/projects/jquery-dotimeout/jquery.ba-dotimeout.js"></script>
<!-- http://benalman.com/projects/jquery-dotimeout-plugin/ -->
<div class="a x" id="x">x</div>
<div class="a y" id="y">y</div>
<div class="a z" id="z">z</div>

<div class="b x" id="x_tt">
    this is a tooltip for x<br/>
    <a href="#">some</a>
    <a href="#">sample</a>
    <a href="#">links</a>
</div>
<div class="b y" id="y_tt">
    this is a slightly wider tooltip for y<br/>
    <a href="#">more</a>
    <a href="#">sample</a>
    <a href="#">links</a>
</div>
<div class="b z" id="z_tt">
    this is a tooltip for z<br/>
    <a href="#">some</a>
    <a href="#">sample</a>
    <a href="#">links</a>
</div>

CSS

.a {
    float: left;
    border: 1px solid #000;
    padding: 2px 6px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align: center;
}

.b {
    border: 1px solid #000;
    padding: 2px 6px;
    display: none;
    position: absolute;
    z-index: 2000;
}

.a, .b a { cursor: pointer; }
.b, .b * { cursor: default; }

.tt-current { z-index: 2001; }

.x { background: #afa; }
.y { background: #faa; }
.z { background: #aaf; }

a:hover { color: #0a0; }

JavaScript

// For each button / tooltip pair.
$('.a').each(function(){
    var id = this.id,                                     // Button id.
        btn = $( '#' + id ),                              // Button.
        tt = $( '#' + id + '_tt' ),                       // Tooltip.
        hover_delay = 500,                                // hoverIntent delay.
        
        top = btn.offset().top + btn.outerHeight( true ); // For animating in/out.
    
    // For each button and tooltip pair, add mouseover / mouseout event handlers
    // that both do the same thing, with the same doTimeout id: show or hide the
    // tooltip.
    btn.add(tt)
        .mouseover(function(){
            $.doTimeout( 'tt' + id, hover_delay, function(){
                // If tooltip is already visible (but not animating), do nothing.
                if ( tt.is(':visible') && !tt.is(':animated') ) { return; }
                
                // Lower z-index of any other visible tooltips so fading in the
                // new tooltip looks nicer.
                $('.b').not(tt).removeClass( 'tt-current' );
                
                // Show tooltip.
                tt
                    .stop( true )
                    .addClass( 'tt-current' )
                    .show()
                    .css({ left: btn.offset().left, top: top - 5, opacity: 0 })
                    .animate({ top: top, opacity: 1 }, 150 );
            });
        })
        .mouseout(function(){
            $.doTimeout( 'tt' + id, hover_delay, function(){
                // If tooltip is already hidden, do nothing.
                if ( !tt.is(':visible') ) { return; }
                
                // Hide tooltip.
                tt
                    .stop( true )
                    .animate({ top: top + 5, opacity: 0 }, 150, function(){
                        // Hide the tooltip so that the tt.is(':visible') works.
                        $(this).hide();
                    });
            });
        })
...