如何使用javascript或angular js为列表中的每个项目显示不同的工具提示？答案

【问题标题】：how to show a different tooltip for each item in a list using javascript or angular js?如何使用javascript或angular js为列表中的每个项目显示不同的工具提示？
【发布时间】：2017-02-04 15:07:12
【问题描述】：

我有一个项目列表显示在屏幕上的网格中。当我将鼠标悬停在项目上时，我想为每个项目显示一个特定的工具提示。请问如何使用 javascript、jquery 或 angular js 来实现这一点？谢谢。

【问题讨论】：

How to add a tooltip to a div的可能重复

标签： javascript angularjs list tooltip

【解决方案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

【讨论】：

【解决方案2】：

您可以将 html 属性“title”添加到项目中。例如，假设您的项目是有序列表。就这样做吧：

<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。或者对我来说，我通常在我的项目中使用 Bootstrap，所以我只使用 Bootstrap Tooltip，即：

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

【讨论】：

我忘了说tooltip的“值”不能用html编码。根据用户提供的搜索条件，从数据库中检索该列表。工具提示将取决于每一行中的一些信息，也就是说，我将在该行中有一个属性来确定工具提示的值。谢谢。