1

我在页面上有一张图片。将鼠标悬停在图像上时，您会看到一个包含一些详细信息的工具提示。比如说——Name : xyz, Account id : abc1234, Technical id : 0000

用户想要从此工具提示中复制一些文本，例如帐户 ID abc1234。这在 JS 中如何实现？

我从代码的角度提出这个问题，以便最终用户可以使用此功能。我不是在寻找任何黑客/技巧来从浏览器复制文本。

4

1 回答 1

0

使用 CSS。

您可以在 css 中设置悬停样式，并设置悬停类，具有绝对定位（上、左、右、下）并创建 div:after 并使用attr设置内容。

这意味着您需要将值写入图像的属性中。

.tooltip:hover:after
{
    border: 1px solid #fc0;
    padding: 3px 6px;
    background: #fffea1;
    content: attr(data-title);
    position: absolute;
    top: 0px;
    left: 0px;
    # right: 0px;
    # bottom: 0px;
    width: 100px;
    height: 100px;
}

要在 CSS 中连接两个或多个字符串值，请用空格分隔它们：

.tooltip:hover:after
{
    content: attr(class) ' ' attr(data-size);
}

请注意，attr() 函数和引号之间的空格与引号内的空格不同。后者是一个包含空格字符的实际字符串，它将分隔输出中的两个属性值。三部分之间的空格是将它们连接在一起的运算符。

不幸的是，大多数浏览器不支持在 img 标签上使用 :after 或 :before，因此您需要将 img 更改为带有背景图像的 div：

<div style="position:relative; display: inline-block; background-color: green;">

<div style="display:block; width: 32px; height: 32px; 
  background-size: 32px 32px;
background-image: url('https://i.stack.imgur.com/MaCKR.jpg');" class="tooltip" data-title="I am the basic tooltip content"></div>


</div>

另一个不幸的情况是，你不能从伪元素中复制......

因此，如果您想在 JavaScript 中执行此操作，则鼠标事件是 mouseover/mouseout 或 mouseenter/mouseleave。类似于以下内容：

function attachHoverHandler()
{
  var fragment = document.createDocumentFragment();
  var text = document.createTextNode('Before - ');
  var div = document.createElement("div")
  div.appendChild(text);


  fragment.appendChild(div);



  Array.prototype.forEach.call(document.getElementsByTagName('img'), function (img) {
      console.log("adding", img);
      // img.insertBefore(fragment.cloneNode(), img.parentElement.firstChild);
      img.addEventListener("mouseenter", function(event){ 
        /* here goes your code */ 
        img.parentElement.insertBefore(fragment.cloneNode(true), img);
        console.log("mouseenter", event);
      });

      img.addEventListener("mouseleave", function(event){ 
        /* here goes your code */ 
        img.parentElement.removeChild(img.previousSibling);
        console.log("mouseleave", event);
      });
  });
}


function autorun()
{
  console.clear();
  attachHoverHandler();
}


   // event listener
   if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
   else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
   else window.onload = autorun;
于 2019-10-11T13:02:34.827 回答