javascript - 如何在更改元素后保留 Bootstrap 工具提示？

Question

我有这部分 JavaScript(jQuery 代码)

        instance.on(dragLinks, "click", function(e) {
            var s = instance.toggleDraggable(this.getAttribute("rel"));
            this.innerHTML = (s ? '<a href="#" class="cmdLink drag" style="margin-right: 3px;"> <span class="glyphicon glyphicon-remove-sign" title="disable dragging" style="font-size: 15px;"> </span> </a>' : '<a href="#" class="cmdLink drag" style="margin-right: 3px;"> <span class="glyphicon glyphicon-ok-sign" title="enable dragging" style="font-size: 15px;"> </span> </a>');              
            jsPlumbUtil.consume(e);
        });

以“this.innerHTML”开头的行在单击元素(图标)后对其进行更改。正如您所看到的，它是 bootstrap 3.0 字形。

我有关于它们的工具提示

        $(".glyphicon-remove-sign").tooltip({ 
                    placement: 'bottom',
                    });
        $(".glyphicon-ok-sign").tooltip({
                placement: 'bottom',
                }); 

加载应用程序后，首先显示 glyphicon-remove-sign 图标。 Bootstrap 3.0 工具提示也正确显示。但是，问题是，点击它们后，不再有 Bootstrap 3.0 的工具提示效果，只有糟糕的 HTML 工具提示。如何解决这个问题？

Answer 1

根据 Bootstrap 网站，“工具提示和弹出数据 API 是可选的，这意味着您必须自己初始化它们。”

因此，为了实现您的目标，必须重新初始化 Bootstrap 工具提示，正如 Miraage 所提到的。

这是一个很好的教程，可能会有所帮助:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php

希望这有帮助!