如何使用javascript或angular js爲列表中的每個項目顯示不同的工具提示？

Question

我有一個在屏幕上的網格中顯示的項目列表。當我將鼠標懸停在項目上時，我想爲每個項目顯示特定的工具提示。 我該如何使用javascript，jquery或angular js來完成該操作？ 謝謝。

Answer 1

您可以使用angular ui tooltip。

$scope.titles = [ 
    { 
     "id" : 1, 
     "title" : "title1", 
     "tooltip" : "tip1" 
    }, 
    { 
     "id" : 2, 
     "title" : "title2", 
     "tooltip" : "tip2" 
    }, 
    { 
     "id" : 3, 
     "title" : "title3", 
     "tooltip" : "tip3" 
    }, 
    { 
     "id" : 4, 
     "title" : "title4", 
     "tooltip" : "tip4" 
    }, 


    ] 

在HTML

<p ng-repeat = "x in titles" tooltip-placement="top-left" uib-tooltip="{{x.tooltip}}">{{x.title}}</p> 

看一看plunker

Answer 2

您可以將html屬性「標題」添加到項目。 舉例來說，可以說你的物品是一個有序的清單。只是這樣做：

<ol> 
    <li title='this is item number one'>Item One</li> 
    <li title='this is the second items'>Item Two</li> 
    <li title='third!'>Item Three</li> 
</ol> 

對於更花哨的工具提示，你可以使用CSS。或者對我來說，我通常用引導我的項目，所以我只是用引導工具提示是：

<li data-toggle="tooltip" title="This is item no 1!">Item One</li>