单击按钮时的工具提示

Question

我正在使用 clipboard.js 从 textarea 复制一些文本，这工作正常，但我想显示一个工具提示，说明 "Copied!" 如果复制成功，例如他们在他们网站上给出的例子中这样做。

这是一个不显示工具提示的示例：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

这里有一个jsfiddle按照网站的方式实现了这个，我偷了源代码：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 3

我喜欢

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 link https://jsfiddle.net/hs48sego/1/

Answer 4

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

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

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 文件复制到方便的位置，然后将 link 复制到您的 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>

就是这样！

单击按钮时的工具提示

Tooltip on click of a button

javascript

clipboard.js