user5368737 user5368737 - 5 months ago 71
jQuery Question

Individual tooltip when using multiple buttons with clipboard.js

I have a page with two

textarea
s and two
button
s that copy the content of each
textarea
respectively to the user's clipboard when pressed. When the button is pressed and the copying is successful, a tooltip shows saying
Copied!
. With how I had it set up before, when 1 button was pressed, then a tooltip was shown for both buttons instead of just the one pressed (see 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();
});


After basically duplicating the code above I managed to make it so that a tooltip is only shown for the button that is clicked (see here), but this seems like a very beginner-ish way to do it (which I am).

Answer

You don't need to create two instantes of Bootstrap's Tooltip because Clipboard.js returns you the button that you clicked (e.trigger).

$('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>

Comments