使用 AngularJS 的动态工具提示

Question

我想添加一个工具提示，它会在鼠标悬停在以下元素上时显示。

<a ng-click="click(this)">
<span class="icon"></span>
</a>
{{product.title}}

我在 product.desc 中有工具提示。我尝试使用以下代码：

 <span tooltip="{{product.desc}}" class="glyphicon"></span>

但这不起作用。有 Ideas/Suggestions 吗？请帮忙

[编辑] 当我使用开发人员工具检查时，我可以看到 product.desc 的值按预期存在于页面的源代码中。

谢谢

Answer 1

而不是

<span tooltip="{{product.desc}}" class="glyphicon"></span>

我们需要给予

<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>

Answer 2

您使用的 angular 是哪个版本？可能会发生一些事情...在过去的 9 个月里，我一直在开发 angular 应用程序，所有这些应用程序都利用了工具提示库。

假设您正在使用来自 angular-ui

的工具提示库

确保您在 app.js 模块依赖项中引用 angular-ui 模块

angular.module('ValuesEntryApp', ['ui.bootstrap', ...more depedencies,]).config(funciton(){...});

Angular 1.3 有一个关于 angular-ui 工具提示的已知问题：issue/solution

其他：你说即使你使用了标题标签它仍然不呈现工具提示？我认为这取决于您使用的浏览器，但我至少在 chrome 中知道，如果您将鼠标悬停在带有标题的元素上，它会显示一小会儿标题。你的字形图标甚至在屏幕上呈现吗？您的控制台中是否有任何错误？如果您仍在寻求帮助，请向我们提供更多信息。如果我们有更多关于您的开发设置的信息，我可以帮助它为您工作。

Answer 3

None 以上答案解决了我的问题。这对我有用：

而不是

<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>

我们需要说：

<span data-toggle="tooltip" data-original-title="{{product.desc}}" class="glyphicon"></span>

使用 AngularJS 的动态工具提示

Dynamic Tooltip using AngularJS

html

angularjs

tooltip