来自元素的 Angular UI 工具提示答案

【问题标题】：Angular UI tooltip from element来自元素的 Angular UI 工具提示
【发布时间】：2015-05-20 12:20:34
【问题描述】：

是否可以从元素而不是属性值中获得 Angular UI 工具提示？

类似：

<a data-tooltip-id="tooltip1" href="#">Show the tooltip</a>
<p id="tooltip1">Hello, <em>world</em>!</p>

【问题讨论】：

标签： angularjs tooltip angular-ui

【解决方案1】：

Angular UI 工具提示对于您要完成的工作来说似乎非常简单。

但这绝对是可以实现的。如果您愿意像 here 中指出的那样覆盖 Angular UI 库中的一些核心模块和指令。你可以做得很好。

但是，如果您正在寻找快速简便的解决方案 - 我建议您使用 qTip (http://qtip2.com/)。这是一个非常强大的工具提示库。

最坏的情况，你可以只使用他们的 JS 并在其上拥有自己的样式/Angular UI 工具提示样式。

你可以这样做 -

$('a').qtip({
  content: {
    text: $('#tooltip1').html()
  }
});

<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>

<a data-tooltip-id="tooltip1" href="#" tooltip="test">Show the tooltip</a>
<p id="tooltip1" style="display:none;">Hello, <em>world</em>!</p>

【讨论】：