Подсказка по простому JavaScript — Переполнение стека

Обычная подсказка JavaScript

Если вас интересует простой надежный вариант, добавьте несколько строк JavaScript в конец своей страницы:

 (function(){ var stylesheet1 = document.createElement('style'); stylesheet1.innerHTML = 'mb-tooltip {display: none;position: fixed;}[data-mb-tooltip]:hover   mb-tooltip {display: block;}'; document.head.appendChild(stylesheet1); var stylesheet2 = document.createElement('style'); document.head.appendChild(stylesheet2); var tooltipList = document.querySelectorAll('[data-mb-tooltip]'); for(var i = 0; i {amp}lt; tooltipList.length; i  ){ var tooltipContainer = document.createElement('mb-tooltip'); tooltipContainer.innerHTML = tooltipList[i].getAttribute('data-mb-tooltip'); tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling); } window.addEventListener('mousemove', function(e){ stylesheet2.innerHTML = 'mb-tooltip { top: '   (e.clientY   18)  'px; left: '   e.clientX  'px}' }); })(); 

Затем добавьте data-mb-tooltip="your text" к элементу, который вы хотите показать, когда вы наводите курсор на него.

Затем вы можете стилизовать всплывающую подсказку так, как хотите, используя mb-tooltip в вашем CSS (например, mb-tooltip {border:solid gray 1px;} )

PS Вы также можете поместить HTML в mb-tooltip .

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector