動態生成引導工具提示

我有一個包含文本的頁面，文本中的一些文字可以動態更改。這些詞有一個元素，應該有一個工具提示。當用戶徘徊單詞（或者我猜想在觸摸設備上點擊它）時，應該使用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/ –

動態生成引導工具提示

回答

相關問題