如何在使用零剪贴板复制后显示工具提示？
如何在使用零剪贴板复制后显示工具提示？
提问于 2014-12-16 00:10:24
我试图模仿在github和bootstrap站点上看到的行为，在那里，零剪贴板按钮上的工具提示在从“复制到剪贴板”复制到“复制”之后会发生变化。这两个站点似乎都使用了一个叫做data- work 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>回答 2
Stack Overflow用户
发布于 2015-05-26 22:00:44
不幸的是，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");
});
//...Stack Overflow用户
发布于 2015-01-09 20:04:46
最简单的解决方案是在aftercopy事件期间将'generated' tooltip text更改为其他内容。
//...
client.on('aftercopy', function(event) {
$('.tooltip .tooltip-inner').text('Copied!');
});
//...查看更新的Plunk (包含bootstrap CSS和JS以使用其简单的工具提示)并获得灵感
注释：如果工具提示文本(单击前后)的长度不同，则此示例中的底部/顶部工具提示会稍微移动一点。使用左/右工具提示位置或显示新的工具提示都可以
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27488279
复制相关文章
相似问题
腾讯云开发者
