JavaScript - 懸停時的工具提示div

Question

我想實現這種情況：用戶懸停鏈接，並在他的屏幕上顯示div與其他信息。

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

是一種優雅的方式來分離視圖（在我的情況下是HTML結構）和邏輯（使用JS腳本從JSON中的服務器獲得的數據）並將它們組合起來？ 它是什么......模板引擎或JavaScript中的類似內容？

Answer 1

Bootstrap完成所有這些以及更多： 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

您可以像這樣生成HTML條目

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

並使用CSS來設置工具提示的樣式:(重要的部分是a:hover .tooltip以及除.tooltip background之外的所有內容

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 3

您可以通過某些程序或腳本動態更改Title =“信息”，並使用以下代碼將其顯示為工具提示，在網上找到它

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

Answer 4

只需在div標簽中添加title屬性，如下面的代碼....

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

只需復制粘貼並檢查。