使用 Clipboard.js 在工具提示中单独显示消息

Question

我关注了这个link 这非常有帮助。我的问题是当它发生一点变化时，在下面的代码片段中，如果我想要两个输入按钮并在单击它后分别为每个输入按钮提供 copied 工具提示消息，我应该怎么做，现在在下面的代码片段中当你点击每一个时，它会显示两个工具提示 coinside

// 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>
<button class="btn btn-primary" data-clipboard-text="1">Click me</button>

Answer 1

您应该将触发事件的按钮传递给您的函数。

这是更新后的代码：

// Tooltip

$('button').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);
}

// Clipboard

var clipboard = new Clipboard('button');

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

clipboard.on('error', function(e) {
  var btn = $(e.trigger);
  setTooltip('Failed!');
  hideTooltip(btn);
});

使用 Clipboard.js 在工具提示中单独显示消息

show a message in tool-tip separately using Clipboard.js

html

css

tooltip

clipboard.js