Как скопировать текст из всплывающей подсказки в Html / JS

Question

У меня есть изображение на странице. При наведении на изображение вы увидите подсказку с некоторыми деталями. Скажем, например - Name : xyz, Account id : abc1234, Technical id : 0000

Пользователь хочет скопировать некоторый текст из этой подсказки, например, идентификатор учетной записи abc1234. Как этого достичь в JS?

Я спрашиваю об этом с точки зрения кода, чтобы конечный пользователь мог использовать эту функциональность. Я не ищу никаких хитростей / хитростей, чтобы скопировать текст из браузера.

Answer 1

с 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 () и кавычками не совпадает с пробелом в кавычках. Последняя является действительной строкой, содержащей символ пробела, который разделит два значения атрибута в выходных данных. Пробел между этими тремя частями - это оператор, который соединяет их вместе.

К сожалению, большинство браузеров не поддерживают использование: after или: before для тегов img, поэтому вам нужно изменить img на div с background-image:

<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;