Kang Ismet Tryit Editor

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>Tooltip</h1>
<a class="tooltip" href="http://blog.kangis.my.id" title="Blogger Tutorial">Blog Kang Ismet</a>
<p class="tooltip" title="Ini adalah contoh tooltip pada tag p">Contoh tooltip pada tag p</p>
<img class="tooltip" title="Justin Hall" src="https://kangismet.github.io/blog/img/justin-hall.jpg"/>

tooltips.forEach(function (el) {
        let tooltipEl;
        let tipText = '';

el.addEventListener('mouseenter', function () {
            tipText = el.getAttribute('title');
            el.removeAttribute('title');

tooltipEl = document.createElement('p');
            tooltipEl.className = 'getTooltip';
            tooltipEl.textContent = tipText;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.display = 'none';

document.body.appendChild(tooltipEl);

// efek fade in sederhana
            tooltipEl.style.display = 'block';
            tooltipEl.style.opacity = 0;
            let opacity = 0;
            const fadeIn = setInterval(() => {
                opacity += 0.1;
                tooltipEl.style.opacity = opacity;
                if (opacity >= 1) clearInterval(fadeIn);
            }, 30);
        });

el.addEventListener('mouseleave', function () {
            el.setAttribute('title', tipText);
            if (tooltipEl) {
                tooltipEl.remove();
            }
        });

el.addEventListener('mousemove', function (e) {
            if (tooltipEl) {
                tooltipEl.style.left = (e.pageX + 20) + 'px';
                tooltipEl.style.top = (e.pageY + 10) + 'px';
            }
        });
    });
});
</script>
</body>
</html>

HTML Online Editor