Javascript 单击按钮时的工具提示

我正在使用从

textarea

复制一些文本，这很好，但是如果像他们在网站上给出的示例中那样成功复制，我想显示一个工具提示，上面写着“复制！”

---

下面是一个不显示工具提示的示例：

Clipboard.js creator Here。所以Clipboard.js对用户反馈并不固执己见，这意味着它没有工具提示解决方案

但这里有一个示例，说明如何将它与引导工具提示集成

//工具提示
$（“按钮”）。工具提示({
触发器：“单击”，
位置：'底部'
});
函数设置工具提示（消息）{
$（“按钮”）。工具提示（“隐藏”）
.attr（'data-original-title'，消息）
.工具提示（“显示”）；
}
函数hideTooltip（）{
setTimeout（函数（）{
$（“按钮”）。工具提示（“隐藏”）；
}, 1000);
}
//剪贴板
var clipboard=新剪贴板（“按钮”）；
剪贴板上的（'success'，函数（e）{
setTooltip（'Copied！'）；
hideTooltip（）；
});
剪贴板.on（'error'，函数（e）{
设置工具提示（'Failed！'）；
hideTooltip（）；
});

单击我
这是一个js提琴，它以网站的方式实现了这一点，我偷了源代码：

解决方案的主要组成部分包括：

function showTooltip(elem, msg) {
    elem.setAttribute('class', 'btn tooltipped tooltipped-s');
    elem.setAttribute('aria-label', msg);
}

clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
    showTooltip(e.trigger, 'Copied!');
  e.clearSelection();
});

并添加primer.css。一种不那么懒惰的方法是从您需要的css中提取类。
我喜欢这样做

HTML:

<button class="test" data-clipboard-text="1">Button 1</button>
<button class="test" data-clipboard-text="1">Button 2</button>

使用JSIDLE链接

*[工具提示]：焦点：在{
内容：attr（工具提示）；
显示：块；
位置：绝对位置；
}
按钮



如果您有一些按钮等，则此解决方案有效：

function setTooltip(e,message) {
  $(e.trigger).tooltip({
  trigger: 'click',
  placement: 'bottom'
});
$(e.trigger).tooltip('hide')
 .attr('data-original-title', message)
 .tooltip('show');
}

function hideTooltip(e) {
  setTimeout(function() {
    $(e.trigger).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e,'Copied!');
  hideTooltip(e);
});

clipboard.on('error', function(e) {
  setTooltip(e,'Failed!');
  hideTooltip(e);
});

我正在使用Menucool JavaScript工具提示。由触发元素决定如何启动工具提示：

<span onclick="tooltip.pop(this, 'Hello world!')">
    Click me
</span>


点击我
仅CSS解决方案

这是一个很好的解决方案


用法：

将node_modules/primer tooltips/build/build.css文件复制到一个方便的位置，然后在HTML中链接到它。（考虑将其重命名为更方便的名称，例如
primer tooltips.css
）。您必须通过注释掉
.tooltipped:hover:：before、.tooltipped:hover:：after、
伪选择器来编辑build.css文件，以实现点击效果

假设已经设置了clipboardJS，请将以下属性添加到“复制”按钮：

<button 
    class="tooltipped tooltipped-s tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" 
    aria-label="copied!">
copy
</button>


复制

就这样
 您必须使用HTML/CSS创建工具提示，bootstrap有一个内置的工具提示。然后，您可以根据复制的成功/失败来隐藏/显示它。您如何在一个页面上使用多个按钮来实现这一点，这些按钮都是从不同的
textare
s复制的？我认为如果您的页面上有一些剪贴板按钮，您的解决方案就不好。上面的代码似乎与最新的Bootstrap 3.3.7不兼容。@Zeno-是这样的需要使用剪贴板代码配置任何特殊内容以在页面上传递项目列表，每个项目都有一个复制按钮？此答案更好。这应该是正确的答案，因为它可以使用多个按钮。上述代码似乎不适用于最新的Bootstrap 3.3.7。
npm install --save primer-tooltips

<button 
    class="tooltipped tooltipped-s tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" 
    aria-label="copied!">
copy
</button>