使用零剪贴板复制后如何显示工具提示？答案

【问题标题】：How to show tooltip after copying using zero-clipboard?使用零剪贴板复制后如何显示工具提示？
【发布时间】：2014-12-15 16:10:23
【问题描述】：

我正在尝试模拟在 github 和引导站点上看到的行为，其中零剪贴板按钮上的工具提示在从“复制到剪贴板”之类的内容复制到“已复制”之后发生了变化。这两个站点似乎都使用了一个名为 data-copied-hint 的元素来执行此操作，但它对我不起作用。我还尝试在使用 jquery 复制后修改标题元素，但这只会在下次悬停时更改工具提示 - 单击后工具提示仍未显示。有什么想法我需要做什么？

这是我的代码（也在 Plunker 上http://plnkr.co/edit/HTXl8Yjz3Wp9iOL5LKr7）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>

    <button id="myclippy" data-clipboard-text="hello world" title="click to copy" data-copied-hint="you copied the text">hello</button>
    <input type="text" />

    <script type="text/javascript">
        var button = document.getElementById("myclippy");
        var client = new ZeroClipboard(button);
    </script>
</body>
</html>

【问题讨论】：

标签： zeroclipboard

【解决方案1】：

不幸的是，Samuel 的方法并没有达到我想要的效果。经过一番搜索，我发现了这个要点：https://gist.github.com/subchen/4d07dda61f88dcd9320a

使用 global-zeroclipboard-html-bridge 为我工作

例如./

//...
var $bridge = $("#global-zeroclipboard-html-bridge");

client.on("ready", function(e) {
  $bridge.data("placement", "left").attr("title", "Copy to clipboard").tooltip();
  });

client.on("aftercopy", function(e) {
  $bridge.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle");
    });
//...

【讨论】：

【解决方案2】：

最简单的解决方案是在aftercopy 事件期间将'generated' tooltip text 更改为其他内容。

//...
client.on('aftercopy', function(event) {
      $('.tooltip .tooltip-inner').text('Copied!');
    });
//...

查看更新后的Plunk（包含引导 CSS 和 JS 以使用其简单的工具提示）并获得启发

注意：如果工具提示文本（点击前和点击后）的长度不同，则此示例中的底部/顶部工具提示会稍微移动。使用左/右工具提示位置或显示新的工具提示可能会起作用

【讨论】：

关于您的注释（工具提示的位置），您能否更新您的示例（Plunk），在复制后显示带有短文本的新工具提示？谢谢