Question

我正在使用clipboard.js复制textarea中的某些文字，而且工作正常，但我想显示一个工具提示“复制！”如果它被成功复制，就像在他们的网站上给出的例子中那样。

以下是一个没有显示工具提示的工作示例：https://jsfiddle.net/5j50jnhj/

Answer 1

Clipboard.js创建者在这里。所以Clipboard.js并不反对用户反馈，这意味着它没有提供工具提示解决方案。

但是这里有一个如何将它与Bootstrap的工具提示集成的例子。

// Tooltip

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(message) {
  $('button').tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip() {
  setTimeout(function() {
    $('button').tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip('Copied!');
  hideTooltip();
});

clipboard.on('error', function(e) {
  setTooltip('Failed!');
  hideTooltip();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary" data-clipboard-text="1">Click me</button>

Answer 2

我喜欢它

HTML：

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

JS：

$('.test').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn, message) {
  btn.tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    btn.tooltip('hide');
  }, 1000);
}

var clipboard = new Clipboard('.test');

clipboard.on('success', function(e) {
    var btn = $(e.trigger);
  setTooltip(btn, 'Copied');
  hideTooltip(btn);
});

使用jsfiddle链接https://jsfiddle.net/hs48sego/1/

Answer 3

＆＃13;

*[tooltip]:focus:after {
  content: attr(tooltip);
  display:block;
  position: absolute;    
}

＆＃13;

<button tooltip="I'm tooltip">Button</button>
<br><br>
<a href = "javascript:void(0)" tooltip = "I'm tooltip">Link</a>

＆＃13;

Answer 4

这是一个js小提琴，以网站的方式实现这一点，我偷了源代码：https://jsfiddle.net/bmbs7yco/

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

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中提取类。

Answer 5

如果您有一些按钮等，此解决方案可以正常工作：

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);
});

Answer 6

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

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

Answer 7

仅CSS解决方案

Githubs Primer tooltips是一个很好的解决方案。

用法：

npm install --save primer-tooltips

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

假设您已经设置了剪贴板JS，请将以下属性添加到“复制”按钮：

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

就是这样！

单击按钮时的工具提示

7 个答案: