JavaScript-tooltip div hover

Question

我想實現這種情況：用戶懸停鏈接，並在他的屏幕上出現帶有附加信息的div。

沒有什麼問題，要用絕對位置生成div，填充數據並用jQuery顯示它，但問題在於可維護性。我想分開邏輯和視圖。如果我想在未來更改頁面佈局怎麼辦？程序員如何知道頁面的某些部分存在於JavaScript文件中？

它是一種優雅的方式來分離視圖（在我的情況下，HTML結構）和邏輯（數據從服務器獲取JSON使用JS腳本）並將它們合併？是否有任何...在JavaScript模板引擎或類似的東西？

Answer 1

引導，這一切和更多：http://getbootstrap.com/javascript/#tooltips

爲了把它在：

$('#example').tooltip(options) 

而且標記的存在：

<div class="tooltip"> 
    <div class="tooltip-inner"> 
    Tooltip text here! 
    </div> 
    <div class="tooltip-arrow"></div> 
</div> 

轉到鏈接上更詳細的解釋如何實現它

Answer 2

你可以改變Title =「information」dyn amicaly通過某些程序或腳本，使用下面的代碼來顯示它作爲一個工具提示，發現它的淨

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Answer 3

您可以生成這樣

<a> 
    My Cool Link 
    <div class="tooltip"> 
     This link is awesome! 
    </div> 
</a> 

並使用CSS你的HTML項樣式工具提示： （最重要的部分是a:hover .tooltip和一切除了background上.tooltip

a { 
    display: inline-block; 
} 
a:hover .tooltip { 
    visibility: visible; 
} 
.tooltip { 
    position: relative; 
    top: 20px; 
    left: -50%; 
    display: inline; 
    visibility: hidden; 
    background: #eee; 
} 

示例：http://jsfiddle.net/4K7sB/

然後，您只需使用JS填充具有正確文本的元素。

Answer 4

只需添加標題屬性像下面的代碼div標籤....

<div title="First Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div> 
</div> 
<br /><br /> 
<div title="Second Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div> 
</div> 

只是複製粘貼和檢查。