如何使用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>