jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• HTML
• CSS
• Result

YUI().use('node', 'overlay', 'widget-anim',  'event', 'widget-position-align', function(Y) {
    var tooltip = new Y.Overlay({
        zIndex: 100,
        render: true,
        visible: false,
        srcNode:'#tip',
        plugins: [{fn:Y.Plugin.WidgetAnim, cfg:{duration:.35}}]
    });
    var clear = function(){
        tooltip.set('bodyContent',' ' );
        tooltip.get('boundingBox').removeClass('side');
        tooltip.get('boundingBox').removeClass('top');
    }
    
    Y.all('#menu a').on({
        mouseover: function(e){
            clear();
            tooltip.set('bodyContent',e.currentTarget.getAttribute('title'));
            tooltip.get('boundingBox').addClass('side');
            tooltip.align(e.currentTarget, [Y.WidgetPositionAlign.LC, Y.WidgetPositionAlign.RC]);
            tooltip.show(true);
            e.preventDefault();
            
        },
        mouseout: function(e){
            tooltip.hide(true);
            clear();
        }
    });
    Y.all('#bar a').on({
        mouseenter: function(e){
            clear();
            tooltip.set('bodyContent',e.currentTarget.getAttribute('title'));
            tooltip.get('boundingBox').addClass('top');
            tooltip.align(e.currentTarget, [Y.WidgetPositionAlign.BC, Y.WidgetPositionAlign.TC]);
            tooltip.show(true);
            e.preventDefault();
           
        
        },
        mouseleave: function(e){
            tooltip.hide(e);
            clear();
        }
    });
});

<div id="menu">
    <ul>
        <li><a href="http://yuilibrary.com" title="Hands down, the best full stack JavaScript Framework around"> YUI </a</li>
        <li><a href="http://jquery.com" title="Just cause everyone uses it doesn't make it good. There is more to life than the DOM"> jQuery </a></li>
        <li><a href="#" title="If I didn't think so much of YUI I'd probably use Dojo, I do like what I see."> Dojo </a></li>
    </ul>
</div>
<div id="bar">
    <a href="http://yuilibrary.com" title="Hands down, the best full stack JavaScript Framework around"> YUI </a> | <a href="http://jquery.com" title="Just cause everyone uses it doesn't make it good. There is more to life than the DOM."> jQuery </a> | <a href="http://dojotoolkit.org" title="If I didn't think so much of YUI I'd probably use Dojo, I do like what I see."> Dojo </a>
</div>
<div id="tip">
    <div class="yui3-widget-bd">Body</div>   
</div>  

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
  margin:4px;
  padding:6px;
  display:inline-block;
  border:1px solid white;  
}
a:hover{
 border:1px solid #00B7FF;   
    
}
.side .yui3-overlay-content {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: relative;
    border: 4px solid #00B7FF;
    padding:4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.side .yui3-overlay-content:after, .side .yui3-overlay-content:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;

}

.side .yui3-overlay-content:after {
    border-width: 9px;
    border-right-color: #ccc;
    top: 45px;
}

.side .yui3-overlay-content:before {
    border-width: 14px;
    border-right-color: #00B7FF;
    top: 40px;
}
.side.yui3-overlay {
 padding-left:15px   
}
.top .yui3-overlay-content {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: relative;
    border: 4px solid #00B7FF;
    padding:4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.top .yui3-overlay-content:after, .top .yui3-overlay-content:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    top: 100%;
    position: absolute;
    width: 0;

}

.top .yui3-overlay-content:after {
    border-width: 9px;
    border-top-color: #ccc;
    right:45px;
}

.top .yui3-overlay-content:before {
    border-width: 14px;
    border-top-color: #00B7FF;
    right:40px
}
.top.yui3-overlay {
 padding-bottom:15px   
}



ul{padding:4px;}

#holder {display:none;}

#bar {
 
    color: #339; 
}
#bar a {
    display:inline-block;
}