动态生成引导工具提示

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

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

这里是功能的简单示例文本和简化版本：
http://jsfiddle.net/8aqz5auk/1/

那么，有挂钩的引导路/拦截这种事情？或者是否有另一种简单的方法可以完成？

编辑：我刚刚有一个想法。当引导程序显示工具提示时，它似乎将一个元素注入到DOM中。有趣的部分是类'tooltip-inner'的容器。所以，我想听听对身体匹配“.tooltip-内的”新元素被注入每当这种情况发生我试图操纵它：

$('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巴尔，我有一点点接近：http://jsfiddle.net/8aqz5auk/2/
但提示并不总是显示和提示的位置似乎是一种错误（显示出来的单词的顶部，而不是旁边/上方/下方/ ...）。

来源

2017-09-13 Forivin

我真的不知道这是你要求的，但是... https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp –

它根本不是...。 – Forivin

你可能要考虑在文档中列出的提示事件：https://getbootstrap.com/docs/3.3/javascript/#tooltips-events

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

您可以运行一个函数：正在上映之前，后被显示，隐藏，隐藏后之前，在所述元被插入到DOM中。

来源

2017-09-13 10:51:12

有时似乎有点工作。但它似乎很不可靠。 http://jsfiddle.net/8aqz5auk/2/任何想法我可能做错了什么？ – Forivin

我认为问题在于你生成了一个工具提示，然后它会在它显示之前尝试自己定位，然后在这之前，你会手动切换工具提示内的HTML，而不需要插件知道它，不更新。你所做的技术上的工作，但它非常** hacky，尤其是因为工具提示不能正确定位这种方式。此外它看起来你的演示使用Bootstrap版本2.3.2，但版本3.3.7是最新的 - 这是故意的吗？ –

将演示更新到引导程序3.3.7允许使用'inserted.bs.tooltip'事件，这将允许在工具提示呈现并定位之前进行所需的更改。这里是你的演示清理了一下，按预期工作（但仍**非常hacky **！），并且tiwh更新了bootstrap。 http://jsfiddle.net/8aqz5auk/4/ –

动态生成引导工具提示

回答

相关问题