How do I create hover text that copies when you select the base text?

Question

Right now i'm currently using a simple bootstrap tooltip when I create my tables with jQuery, but i wanted a specific functionality that the bootstrap tooltip doesn't offer.

I want to be able to copy the base text and get something like "base text - hover text"; because i need both values when i paste it into excel, simply creating two columns for this data makes the table slightly too big, so i'm looking for another solution.

<a href="#" data-toggle="tooltip" title="hover text">base text</a>

$(document).ready(function(){
   $("#query").click(function() {   

    $.ajax({
            method: "GET",
            url: $('#dns').val()
        })
        .done(function(data) {
            if (data.Success == true) {
//this is where my table with the tooltips are created
                parseResults(data.Results);                 
            } else {
                $('.dnsError').show();
            }

            $('[data-toggle="tooltip"]').on('copy', function(event) {
                event.preventDefault();
                console.log(this.title);
                copyToClipboard(this.innerText + " - " + this.getAttribute('data-original-title'));
              }).tooltip();
        })
        });
});

function copyToClipboard(text) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val(text).select();
      document.execCommand("copy");
      $temp.remove();
    }

score 2 · Accepted Answer · answered May 31 '19 at 15:47

2

I used a slightly modified version of this to copy the text to the clipboard.

You have to get the data-original-title instead of the title since Bootstrap changes that.

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}

$(document).ready(function() {
  $('[data-toggle="tooltip"]').on('copy', function(event) {
    event.preventDefault();
    console.log(this.title);
    copyToClipboard(this.innerText + " - " + this.getAttribute('data-original-title'));
  }).tooltip();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<a href="#" data-toggle="tooltip" title="hover text">base text</a>

answered May 31 '19 at 15:47

FA_developes

162
9

It definitely works on your code snippet, but when i applied it to my code, I'm getting a console log that tells me, "We don't execute document.execCommand() this time, because it is called recursively." – Brock Sokevitz May 31 '19 at 18:04
Check if the `copyToClipboard` function is called more than once at a time, maybe you call it by accident somehow – FA_developes May 31 '19 at 18:20
It seems like it's getting called twice, and i have the data toggle running at the end of my ajax call, since that's when i create the table with these values. But I'm still not entirely sure why it's running twice. I put a console log into my ajax call and it seems like its the only thing getting called twice. – Brock Sokevitz May 31 '19 at 19:04
Can you provide more code? That would make it a lot easier to help you – FA_developes May 31 '19 at 21:08
I went ahead and added the code where i'm using the copytoclipboard to my main post, hopefully that helps. – Brock Sokevitz Jun 03 '19 at 13:54
1

I figured out what was going wrong with my code. I was trying to do this in a modal, so when the snippet added the code to the body it'd enter a recursive call for some reason. When i switched it to adding the temporary clipboard value to the modal, it worked fine. Thank you so much for the help. – Brock Sokevitz Jun 03 '19 at 17:48

How do I create hover text that copies when you select the base text?

1 Answers1