Question

需要在页面上放置一系列图标，以便在单击时切换其行为。每个动作图标都有一个工具提示，反映了两种状态中每种状态的动作。

这是一个动作图标的示例。

    <span name="no_quote_action" class="btn btn-xs btn-action " style="border: none"
          rel="tooltip" data-placement="right" data-trigger="hover"
          title="No-Quote this line" onclick="setNoQuote(this)">
          <span class="glyphicon glyphicon-remove" style="color: #ff0000"></span>
    </span>

在页面上有一个脚本标记，用于概述这两个操作。

<script>
function setNoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-plus');
    button.children().css('color', '#00ff00');
    button.attr('onclick', 'setDoQuote(this)');

    button.tooltip('destroy');
 //   button.attr('data-original-title', 'Undo No-Quote');
    button.attr('title', 'Undo No-Quote');
    setTips();
}

function setDoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-remove');
    button.children().css('color', '#ff0000');
    button.attr('onclick', 'setNoQuote(this)');
    button.tooltip('destroy');
  //  button.attr('data-original-title', 'No-Quote this line');
    button.attr('title', 'No-Quote this line');
    setTips();
}

function setTips() {
    $('[rel="tooltip"]').tooltip({html: true});
}

$(window).load(function () {

    setTips();

});

我看到的问题是，当图标发生变化，之前的工具提示被破坏时，setTips();调用无法成功将新工具提示添加到单击的图标中。这似乎是一个时间问题，因为在事件完成后手动调用setTips()按预期工作。

下面是一个完整的HTML示例页面，用于演示此问题。

http://blake.bitlagoon.com

另外值得注意的是，快速连续点击会产生不同的结果。

请帮助我了解发生了什么以及为什么。我应该采用什么最佳做法来避免这些问题？

Answer 1

替换这个：

 setTips();

使用：

button.tooltip({html: true});

如果仍然无效，则添加两行

button.tooltip({html: true});
button.tooltip('show');

Answer 2

嗯，尽管没有真正理解为什么原始代码没有按预期工作，我提出了一个似乎运作良好的解决方案。

通过将重新设置工具提示的操作从原始按钮单击事件线程中分离出来，一切似乎都能正常工作。因此，诀窍是将setTips()函数调用包装在计时器回调函数中。

setTimeout(function(){
        setTips();
    }, 300);

通过扩展，我猜测在更复杂的情况下或者如果决定使用延迟是不可取的，我打赌我可以触发另一个异步事件来触发setTips()行为，那就是也许工作得很好。但是我现在不打算测试，因为延迟对我的目的来说已经足够好了。

我只是希望我知道为什么在对象事件的上下文中调用.tooltip()会禁止它在该对象上正确设置工具提示。

bootstrap工具提示不会附加到单击的按钮

2 个答案: