Tooltip on click of a button

Question

I\'m using clipboard.js to copy some text from a textarea, and that\'s working fine, but I want to show a tooltip saying \"Copied!\" if it was successfully copi

Answer 1

Clipboard.js creator here. So Clipboard.js is not opinionated about user feedback which means it doesn't come with a tooltip solution.

But here's an example of how you can integrate it with Bootstrap's Tooltip.

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

Click me