Question

我试图模仿github和bootstrap网站上看到的行为，其中零剪贴板按钮上的工具提示在从“复制到剪贴板”复制到“复制”之后发生了变化。这两个站点似乎都使用了一个名为data-copied-hint的元素来执行此操作，但它对我不起作用。我还尝试在使用jquery复制后修改title元素，但这只会在您下次悬停时更改工具提示 - 工具提示仍然没有在点击后立即显示。任何想法我需要做什么？

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

<!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>

Answer 1

不幸的是，塞缪尔的方法并没有像我想的那样完成。经过一番搜索后，我发现了这个要点：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");
    });
//...

Answer 2

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

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

查看更新的Plunk（包含bootstrap CSS和JS以使用简单的工具提示）并获得灵感

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

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

2 个答案: