jquery - 如何创建在您选择基本文本时复制的悬停文本？

Question

现在，当我使用 jQuery 创建表时，我正在使用一个简单的引导工具提示，但我想要引导工具提示不提供的特定功能。

我希望能够复制基本文本并获得类似“基本文本 - 悬停文本”的内容；因为当我将它粘贴到 excel 中时我需要这两个值，简单地为此数据创建两列会使表稍微太大，所以我正在寻找另一种解决方案。

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

Answer 1

我使用了稍微修改过的 this 版本将文本复制到剪贴板。

您必须获取 data-original-title 而不是 title 因为 Bootstrap 改变了它。

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>