Question

我有一个带有文本的页面，文本中的一些单词可以动态更改。这些单词有一个元素，应该有一个工具提示。当用户悬停单词时（或者我猜在触摸设备上单击它），应使用generateSpecialMarkupElement($(element).text())生成工具提示。一旦将HTML呈现给DOM，就必须调用另一个JavaScript函数replaceMarkupHTML() 不幸的是，我无法控制这些功能。

现在我想知道引导程序中是否有一种简单的方法可以完成这项工作。例如，运行第一个函数的before事件和调用第二个函数的after事件。

这是一个简单的示例文本和函数的简化版本：
http://jsfiddle.net/8aqz5auk/1/

有没有一种挂钩/拦截这种东西的引导方式？或者可能有另一种简单的方法可以做到吗？

编辑：我刚才有个主意。当bootstrap显示工具提示时，它似乎将一个元素注入到DOM中。有趣的部分是具有类＆＃39; tooltip-inner＆＃39;的容器。所以我试着在身体上倾听新的元素匹配＆＃39; .tooltip-inner＆＃39;注入时，只要发生这种情况，我就会试图操纵它：

$('body').on('DOMNodeInserted', '.tooltip-inner', function () {
      var el = $(this)
      el.html("") // empty the tooltip element
      el.append(generateSpecialMarkupElement(el.text())) // insert the generated markup element
      replaceMarkupHTML() // replace the markup element with normal html
});

不幸的是它不起作用。它只会引发一百万个错误，当我尝试它时网站会冻结。

编辑2 ：感谢Chris Barr，我离得更近了一点：http://jsfiddle.net/8aqz5auk/2/
但是工具提示并不总是显示出来，工具提示的位置似乎有点不对（显示在单词的顶部，而不是在/上/下/ /。）旁边。

Answer 1

您可能希望查看文档中列出的工具提示事件：https://getbootstrap.com/docs/3.3/javascript/#tooltips-events

$('.elements-with-tooltips').on('show.bs.tooltip', function () {
  // do something…
})

你可以运行一个函数：在显示之前，显示之后，隐藏之前，隐藏之后，以及元素插入DOM之后。

即时生成Bootstrap工具提示

1 个答案: