Adding Tooltip on click of an item in navigation bar

Question

I have a navigation bar as follows:

<div data-role="navbar" class="custom-navbar"  id="custom">
    <ul>
    <li onclick="product()"><a>Product Catalog<span></span></a></li>
    <li onclick="item()"><a>Itemized Status<span></span> Check</a></li>
    <li onclick="perish()"><a>Perishability Alerts<span></span></a></li>
    <li onclick="stock()"><a>OSA Alerts<span></span></a></li>
</ul> 
</div>  

this is my navbar code and my css is

.custom-navbar ul li a {
   background: #00a99d; Old browsers
    background: linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important;
    background: -moz-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; FF3.6+
    background: -webkit-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; Chrome10+,Safari5.1+
    background: -o-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; Opera 11.10+
    background: -ms-linear-gradient( #00a99d,#00a99d ) repeat scroll 0 0 #00a99d !important; IE10+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a99d', endColorstr='#00a99d',GradientType=0 ); IE6-9   
    font-size: 16px;
    font-family: Proxima Nova Bold;
    color: white;
    text-decoration:none;
}

.custom-navbar ul li a.ui-btn-active {
    background: linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important;
    background: #67497a; Old browsers
    background: linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; FF3.6+
    background: -webkit-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; Chrome10+,Safari5.1+
    background: -o-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; Opera 11.10+
    background: -ms-linear-gradient(#00897f, #00897f) repeat scroll 0 0 #00897f !important; IE10+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00897f', endColorstr='#00897f',GradientType=0 ); IE6-9  
    font-size: 16px;
    font-family: Proxima Nova Bold;
    color: white;
    text-decoration:none;
}
#custom a.clicked {
    background-color: #red;
}
#custom ul {
    text-align: center;
}

#custom ul li {
    display: inline-block;
}
#custom  ul a {
    color: #fff;
    padding: 5px;
    background-color: #00a99d;
}

#custom ul a.clicked span {
    left: 50%;
    bottom: 2px;
    display: block;
    width: 0px;
    height: 1px;
    margin-left: -35px;
    padding: 22px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #fff;
}  

js file is

$(document).ready(function(){
    $('#custom ul li a').on('click', function () {
        $('#custom  ul li a ').removeClass('clicked');
          $(this).addClass('clicked');
        });
});

I want something like this as shown in fig. I want to add a tool tip when I click on an item in navbar.
with the code here I am getting like this

can anyone please tell me how to do this
Regards,
VHC

Answer 1

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');
});

Example 1

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;
}

Example 2

Answer 2

Here's a very basic tooltip: http://jsfiddle.net/GGY6m/2/

Hope this helps point you in the right direction.

HTML

<div id="navHeader">
    <ul id="nav">
        <li id="catalog"><a>Product Catalog</a>
            <div class="tooltip">This is my tooltip</div>
        </li>
        <li id="item" onclick="item()"><a>Itemized Status Check</a>
            <div class="tooltip">This is my tooltip</div>
        </li>
        <li id="perishable" onclick="perishable()"><a>Perishability Alerts</a>
            <div class="tooltip">This is my tooltip</div>
        </li>
        <li id="stock" onclick="stock()"><a>OSA Alerts</a>
            <div class="tooltip">This is my tooltip</div>
        </li>
    </ul>
</div>

CSS

        ul{display:inline-block;}
    li{position:relative; cursor:pointer;}
    li:hover .tooltip{display:block;}
    .tooltip{position:absolute; top:-5px; left:50px; background:red; padding:5px; display:none; z-index:10; width:150px;}

JS

$('li').on('click', function(){
    $('.tooltip').hide();
    $('.tooltip', this).show();
});