在工具提示中分别显示使用Clipboard.js的消息

Question

我跟随此链接 Tooltip on click of a button 并且它非常有帮助。我的问题是当它发生一些变化时，在下面的代码片段中，如果我想要有两个输入按钮，并且单击它们后分别为每个按钮分别提供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); 
});