2

I am trying to emulate the behavior seen on github and the bootstrap site, where the the tooltip on the zero-clipboard button changes after copying from something like "Copy to Clipboard" to "Copied". Both sites seem to use an element called data-copied-hint to do this, but it does not work for me. I have also tried modifying the title element after copying using jquery, but that only changes the tooltip the next time you hover over - the tooltip is still not shown right after the click. Any ideas what I need to do?

Here is my code (also on Plunker at http://plnkr.co/edit/HTXl8Yjz3Wp9iOL5LKr7)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>

    <button id="myclippy" data-clipboard-text="hello world" title="click to copy" data-copied-hint="you copied the text">hello</button>
    <input type="text" />

    <script type="text/javascript">
        var button = document.getElementById("myclippy");
        var client = new ZeroClipboard(button);
    </script>
</body>
</html>
sandlb
  • 198
  • 2
  • 9

2 Answers2

2

Unfortunately Samuel's method didn't quite work as I wanted. After a bit more searching I found this gist: https://gist.github.com/subchen/4d07dda61f88dcd9320a

Using the global-zeroclipboard-html-bridge worked for me

eg./

//...
var $bridge = $("#global-zeroclipboard-html-bridge");

client.on("ready", function(e) {
  $bridge.data("placement", "left").attr("title", "Copy to clipboard").tooltip();
  });

client.on("aftercopy", function(e) {
  $bridge.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle");
    });
//...
gef
  • 7,025
  • 4
  • 41
  • 48
1

the simplest solution is to change the 'generated' tooltip text into something else during the aftercopy event.

//...
client.on('aftercopy', function(event) {
      $('.tooltip .tooltip-inner').text('Copied!');
    });
//...

see the updated Plunk (bootstrap CSS and JS is included to work with their simple tooltips) and get inspired

note: if the tooltip text (before and after click) length differs, the bottom/top tooltip in this example gets shifted a bit. either use left/right tooltip positions or displaying a new tooltip might work

Community
  • 1
  • 1
samuel
  • 326
  • 2
  • 9
  • Concerning your note (position of the tooltip) can you please update your example (Plunk) where a new tooltip with a short text is displayed after copying? Thanks – crishushu Aug 04 '15 at 10:26