title: Tooltips + Highlight Animation With Clipboard.js Click
body: <p>I've successfully installed <a href="https://clipboardjs.com/">clipboard.js</a> and have gotten snippets of text to copy to the clipboard upon click. I'm going to be nesting these snippets of text (or the "btn"s they're within) in the cells of a table.</p>
  
  <p><strong>My challenge:</strong></p>
  
  <p>I need the snippets of text to give me a Tooltip "Copied!" message so that people are aware they are clickable. A great example of this is on the clipboard.js documentation page -- click on any of the buttons that cut or copy to see the tooltip message.</p>
  
  <p>From clipboard.js' documentation:</p>
  
  <blockquote>
    <p>Although copy/cut operations with execCommand aren't supported on
    Safari yet (including mobile), it gracefully degrades because
    Selection is supported.</p>
    
    <p>That means you can show a tooltip saying Copied! when success event is
    called and Press Ctrl+C to copy when error event is called because the
    text is already selected.</p>
  </blockquote>
  
  <p>I'm not particularly adept at JS (it took me a few hours to get this far). So I'm at a dead end... was able to install everything on WP, enqueue the script, and add the text/ functionality: </p>
  
  <pre><code> &lt;!-- 1. Define some markup --&gt;
      &lt;div id="btn" data-clipboard-text="1"&gt;
          &lt;span&gt;text to click&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;!-- 2. Include library --&gt;
      &lt;script src="/path/to/dist/clipboard.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- 3. Instantiate clipboard by passing a HTML element --&gt;
      &lt;script&gt;
      var btn = document.getElementById('btn');
      var clipboard = new Clipboard(btn);
  
      clipboard.on('success', function(e) {
      console.log(e);
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
      });
  
      clipboard.on('error', function(e) {
          console.log(e);
          console.error('Action:', e.action);
          console.error('Trigger:', e.trigger);
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>What should I add?
  Thanks!</p>