clipboard.jsで複数のボタンを使用する場合の個別のツールチップ

Question

私は、textareaが2つ、textareaの内容がそれぞれ押されたときにユーザのクリップボードにコピーされる2つのページを持っています。ボタンを押してコピーが成功すると、Copied!というツールチップが表示されます。前の設定方法では、1つのボタンが押されたとき、押されたボタンだけでなく、両方のボタンのツールチップが表示されました（here参照）。基本的に私は、ツールチップのみがクリックされたボタンに表示されるようにそれを作るために管理上のコードを複製した後

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

var clipboard = new Clipboard('button'); 

clipboard.on('success', function(e) { 
    e.clearSelection(); 
    setTooltip('Copied!'); 
    hideTooltip(); 
}); 

clipboard.on('error', function(e) { 
    e.clearSelection(); 
    setTooltip('Failed!'); 
    hideTooltip(); 
}); 

（hereを参照）が、これはそれを行うことは非常に初心者っぽいな方法のように思えます（私はそれです）。

Answer 1

クリックしたボタン（e.trigger）がClipboard.jsから返されるため、Bootstrapのツールチップのインスタントを2つ作成する必要はありません。

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

 
var clipboard = new Clipboard('button'); 
 

 
clipboard.on('success', function(e) { 
 
    e.clearSelection(); 
 
    setTooltip(e.trigger, 'Copied!'); 
 
    hideTooltip(e.trigger); 
 
}); 
 

 
clipboard.on('error', function(e) { 
 
    e.clearSelection(); 
 
    setTooltip(e.trigger, 'Failed!'); 
 
    hideTooltip(e.trigger); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="panel-body text-center"> 
 
      <h4>Textarea 1</h4> 
 
      <textarea id="testarea1">Some text in testarea 1...</textarea><br><br> 
 
      <button class="btn btn-primary" data-clipboard-target="#testarea1">Copy to clipboard</button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="panel-body text-center"> 
 
      <h4>Textarea 2</h4> 
 
      <textarea id="textarea2">Some text in textarea 2...</textarea><br><br> 
 
      <button class="btn btn-primary" data-clipboard-target="#textarea2">Copy to clipboard</button> 
 
     </div> 
 
    </div> 
 
</div>