在項目上的點擊添加工具提示在導航欄

Question

我有一個導航欄，如下所示：

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

這是我的導航欄的代碼和我的CSS是

.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文件是

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

我想要這樣的東西，如圖所示。當我點擊導航欄中的項目時，我想添加一個工具提示。
這裏的代碼我越來越喜歡這個

誰能告訴我如何做到這一點
問候，
VHC

Answer 1

這裏是我的解決方案：

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

編輯：

的span現在看起來是這樣的：

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

這裏是一個非常基本的工具提示：http://jsfiddle.net/GGY6m/2/

希望這有助於指出你在正確的方向。

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