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

【问题标题】：How to have a tooltip change when its anchor is clicked?单击锚点时如何更改工具提示？
【发布时间】：2017-06-11 06:23:29
【问题描述】：

我正在设计一种用户可以单击 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 在 fork 存储库时的行为方式。

End Result

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

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

【问题讨论】：

标签： javascript jquery html css tooltip

【解决方案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。

【讨论】：

你不需要 .('hide') 部分。

【解决方案2】：

为了让你达到同样的效果，你可以使用这个jQuery sn -p：

$("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.

【讨论】：

【解决方案3】：

jQuery 支持在元素上设置click 函数。将它与一些引导程序 tooltip methods 结合起来，你就很成功了。

jQuery

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

jsfiddle

【讨论】：