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 copied like they do in the example given on their website.

Here's an example of it working without showing a tooltip: https://jsfiddle.net/5j50jnhj/

You will have to create a tooltip using HTML/CSS, bootstrap has a built in one. Then you can hide/show it depending on success/failure of the copying. — Chris Wissmach, Jun 13 '16 at 21:00

score 53 · Accepted Answer · answered Jun 13 '16 at 21:12

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

<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>

How would you implement this with multiple buttons on 1 page that all copy from different `textarea`s? — user5368737, Jun 15 '16 at 15:59
I think your solution isn't good if there are some clipboard buttons on your page — binard, Feb 21 '17 at 16:27
The above code does not seem to work with the latest Bootstrap 3.3.7. — bart, Oct 21 '17 at 17:37
@Zeno - Does anything special need to be configured with your clipboard code to hand a list of items on a page, each with a copy button? — Matthew, Nov 07 '20 at 01:03

binard · Answer 2 · 2017-05-23T10:00:16.883

16

I do it like it

HTML :

<button class="test" data-clipboard-text="1">Button 1</button>
<button class="test" data-clipboard-text="1">Button 2</button>

JS :

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

clipboard.on('success', function(e) {
    var btn = $(e.trigger);
  setTooltip(btn, 'Copied');
  hideTooltip(btn);
});

With jsfiddle link https://jsfiddle.net/hs48sego/1/

edited May 23 '17 at 10:00

answered Feb 21 '17 at 16:31

binard

1,726
1
17
27

2

This answer is better. – McGrady May 30 '17 at 12:21
3

This should be the correct answer, since it works with multiple buttons. – Jonno_FTW Aug 16 '17 at 05:39

score 3 · Answer 3 · answered Oct 03 '17 at 18:49

3

*[tooltip]:focus:after {
  content: attr(tooltip);
  display:block;
  position: absolute;    
}

<button tooltip="I'm tooltip">Button</button>
<br><br>
<a href = "javascript:void(0)" tooltip = "I'm tooltip">Link</a>

answered Oct 03 '17 at 18:49

Aikon Mogwai

4,954
2
18
31

score 1 · Answer 4 · answered Jun 13 '16 at 21:18

Here's a js fiddle that implements this the way the website does it, I stole the source code: https://jsfiddle.net/bmbs7yco/

the main components to the solution are:

function showTooltip(elem, msg) {
    elem.setAttribute('class', 'btn tooltipped tooltipped-s');
    elem.setAttribute('aria-label', msg);
}

clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
    showTooltip(e.trigger, 'Copied!');
  e.clearSelection();
});

and adding their primer.css. A less lazy method would be to extract the classes from the css you need.

The above code does not seem to work with the latest Bootstrap 3.3.7. — bart, Oct 21 '17 at 17:37

score 0 · Answer 5 · answered Oct 22 '17 at 04:27

This solution work, if you have some buttons and etc:

function setTooltip(e,message) {
  $(e.trigger).tooltip({
  trigger: 'click',
  placement: 'bottom'
});
$(e.trigger).tooltip('hide')
 .attr('data-original-title', message)
 .tooltip('show');
}

function hideTooltip(e) {
  setTimeout(function() {
    $(e.trigger).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

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

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

score 0 · Answer 6 · answered Aug 05 '18 at 00:00

0

I am using Menucool JavaScript Tooltip. It leaves to the triggering element to decide how to launch the tooltip:

<span onclick="tooltip.pop(this, 'Hello world!')">
    Click me
</span>

answered Aug 05 '18 at 00:00

wcb1

665
1
7
6

danieln · Answer 7 · 2020-11-14T15:02:30.590

CSS Only Solution

Githubs Primer tooltips is an excellent solution.

Usage:

npm install --save primer-tooltips

Copy the node_modules/primer-tooltips/build/build.css file to a convenient location and then link to it in your HTML. (Consider renaming it a more convenient name e.g. primer-tooltips.css). You'll have to edit the build.css file by commenting out the .tooltipped:hover::before,.tooltipped:hover::after, pseudo selectors to achieve the on click effect.

Assuming you have clipboardJS already set up, add the following attributes to your copy button:

<button 
    class="tooltipped tooltipped-s tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" 
    aria-label="copied!">
copy
</button>

That's it!

Tooltip on click of a button

7 Answers7

Linked