Предположим, что мы не хотим устанавливать bootstrap ради одного лишь компонента подсказок, ибо привитая жадность к любым ресурсам, когда устройства были слабыми, а интернет со скоростью 5 кб в секунду, сделали с нашей психикой непоправимое на всю жизнь. Хотя… я и до сих пор считаю, что ни одной не используемой функции, ни одной строки любого кода, не должно быть лишней и все эти «комбайны», «движки» и библиотеки — от лукавого. Либо, у нас есть сайт, где мы хотим реализовать не стандартные и красивые всплывающие подсказки, подогнав их css под свой дизайн, а стандартные подсказки из атрибута title нас не устраивают, тем более, что появляются они не сразу при наведении на элемент. Тогда подгружаем на странице такой код и радуемся:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | HTMLElement.prototype.tooltip = function () { this.onmouseover = function (e) { document.querySelectorAll(".tooltip").forEach(element => { element.parentNode.removeChild(element); }); if (e.target.hasAttribute("data-title")) { e.target.setAttribute("title", e.target.getAttribute("data-title")); e.target.removeAttribute("data-title"); } if (e.target.hasAttribute("title")) { var s = document.createElement("span"); s.innerHTML = e.target.getAttribute("title"); s.setAttribute("class", "tooltip"); s.style.cssText = "position:absolute;background:rgb(0, 0, 0, 0.7);border-radius:3px;font-size:9px;padding:4px;top:" + (e.pageY - 20) + "px;z-index:1;transition: all 600ms ease-out;z-index:9999999999999;color:#fff;white-space: nowrap;display:inline-block;max-width:400px;overflow:hidden;"; document.body.appendChild(s); var x = (document.body.clientWidth / 2) > e.pageX ? (e.pageX + 15) : (e.pageX - s.clientWidth - 15); s.style.left = x + "px"; e.target.setAttribute("data-title", s.innerHTML); e.target.removeAttribute("title"); } } this.onmousemove = this.onmouseover; } document.body.tooltip(); |
