I have a page with two textareas and two buttons 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).

I have a page with two textareas and two buttons 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).

• javascript
• jquery
• clipboard.js

2 Answers 2

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./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

Same solution, but a little different example: maybe it is a little advanced example:

<ul>
    <li>
        <button type="button" class="btn-tooltip" data-clipboard-text="e1" >E1</button>
    </li>
    <li>
        <button type="button" class="btn-tooltip" data-clipboard-text="e2" >E2</button>
    </li>
</ul>

and the lovely javascript:

<script>
    $('.btn-tooltip').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 ClipboardJS('.btn-tooltip');

    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);
    });
</script>

The point

new ClipboardJS('.btn-tooltip') not all buttons. Attention.