Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p>Libero, doloribus in itaque <span title="<img src='https://www.jakpsatweb.cz/images/jakpw.png'>">molestiae</span> reiciendis quibusdam non. Eligendi, repellendus nostrum omnis iusto fugiat quae ad modi aspernatur ratione? Qui temporibus ex et beatae veniam illo modi quis eos inventore!</p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
*[data-title] {color: red} .tooltip {position: fixed; background: #000; color: #fff; padding: .2em .5em; display: none}
CSS
Autoformát
CSS reset
Až na konci
var Tooltip = function() { var elements; var ttEl; var activeTt; var timer; var init = function() { elements = document.querySelectorAll("[title]"); ttEl = document.createElement("div"); ttEl.className = "tooltip"; document.body.appendChild(ttEl); for (var i = 0; i < elements.length; i++) { var el = elements[i]; el.setAttribute("data-title", el.title); el.removeAttribute("title"); el.onmouseover = show; el.onmouseout = hide; } }; var show = function() { clearTimeout(timer); activeTt = this; ttEl.innerHTML = this.getAttribute("data-title"); var coords = this.getBoundingClientRect(); ttEl.style.display = "block"; ttEl.style.left = coords.left + "px"; ttEl.style.top = coords.top + this.offsetHeight + "px"; ttEl.onmouseover = function() { clearTimeout(timer); }; ttEl.onmouseout = function() { hide(); }; }; var hide = function() { clearTimeout(timer); timer = setTimeout(function() { ttEl.style.display = ""; }, 500); }; return { init: init }; }(); Tooltip.init();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>