Here is my solution:
HTML:
<div id="navHeader">
<ul id="nav">
<li id="catalog"><a href="javascript:void(0)">Product Catalog<span>tooltip</span></a></li>
<li id="item" onclick="item()"><a href="javascript:void(0)">Itemized Status Check<span>tooltip</span></a></li>
<li id="perishable" onclick="perishable()"><a href="javascript:void(0)">Perishability Alerts<span>tooltip</span></a></li>
<li id="stock" onclick="stock()"><a href="javascript:void(0)">OSA Alerts<span>tooltip</span></a></li>
</ul>
</div>
css:
a { position: relative; }
a span { display: none; }
a.clicked span {
top: 0;
right: -60px;
display: block;
width: 50px;
height: 20px;
position: absolute;
border: 1px solid #000;
}
jQuery:
$('#nav a').on('click', function () {
$('#nav a').removeClass('clicked');
$(this).addClass('clicked');
});
EDIT:
The span
now looks like this:
a.clicked span {
left: 50%;
bottom: 0px;
display: block;
width: 0px;
height: 0px;
margin-left: -4px; /* equal with border-left */
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid #fff;
}