Question

我正在开发一种设计，用户可以在其中单击一个Glyphicon锚点，然后将文本复制到剪贴板。我希望在单击按钮时更改工具提示。因此，当它们悬停在按钮上时，它将显示“复制到剪贴板”，但在它们单击后，工具提示将变为“复制！”。

<div style='margin: 20px;'>
    <a id='copy-button' href='#' class='my-tool-tip' data-toggle="tooltip"
       data-placement="right" title="Copy to Clipboard">
        <i class='glyphicon glyphicon-link'></i>
    </a>
</div>

这就是GitHub在分配存储库时的UI行为。

End Result

我有复制功能，初始悬停工具提示，我无法弄清楚如何进行点击更改。我还创建了一个jsfiddle来帮助描述我在说什么。提前谢谢！

http://jsfiddle.net/t9Ku6/381/

Answer 1

您正在寻找的是jQuery中的click()事件，用于更新工具提示的data-original-title属性：

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
});

请注意，这可能是一个小错误，让新标题通过，所以您可能需要再次关闭并打开工具提示：

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
    $("a.my-tool-tip").tooltip('show');
});

我创造了一个展示这个here的小提琴。

Answer 2

为了达到相同的效果，您可以使用此jQuery代码段：

$("a.my-tool-tip").tooltip();
$("#copy-button").on('click', function() {
  var tooltip = $(this);
  tooltip.attr('data-original-title', 'Copied!');
  $("a.my-tool-tip").tooltip('show');
});

要切换工具提示的视图，您只需使用.show()。

这是一个有效的 Fiddle.

Answer 3

jQuery支持在元素上设置的click函数。将它与一些引导程序tooltip methods结合起来，你就是金色的。

的jQuery

$('#copy-button').click(function(){
   $(this).attr( "data-original-title", "Copied!" );
   $(this).tooltip('show');
})

jsfiddle

如何在单击锚点时更改工具提示？

3 个答案: