Clipboard.jsを使用してツールチップに別途メッセージを表示

Question

私はこのリンクに従いました Tooltip on click of a button 非常に役に立ちました。私の問題は、2つの入力ボタンを持っていて、それをクリックした後にそれぞれ別々にcopiedツールチップのメッセージを持っていたい場合、何をすべきか、以下のスニペットで各1それはあなたの関数にイベントをトリガーボタンを渡す必要があり、あなたに2ツールチップ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); 
});