Membuat Tooltip Sederhana dengan Vanilla JS dan jQuery

Table of Contents

Apa itu Tooltip?

Tooltip adalah pesan teks singkat yang muncul sementara (pop-up) saat pengguna mengarahkan kursor (hover), mengetuk, atau memfokuskan pada elemen tertentu di antarmuka pengguna (UI) aplikasi atau situs web, memberikan informasi tambahan atau konteks tentang fungsi elemen tersebut tanpa mengganggu tampilan utama.

Membuat Tooltip Sederhana

CSS

.getTooltip {
 display:none;
 position:absolute;
 border:1px solid #333;
 background-color:#161616;
 border-radius:5px;
 padding:10px;
 color:#fff;
 font-size:12px Arial;
}

HTML

Tambahkan class tooltip pada kode HTML, seperti contoh di bawah:

<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"/>

Versi Vanilla JS (JavaScript Murni)

document.addEventListener('DOMContentLoaded', function () {
    const tooltips = document.querySelectorAll('.tooltip');

    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';
            }
        });
    });
});

Versi jQuery

Untuk menggunakan Versi jQuery, template harus sudah menggunakan Framework jQuery.

Harap diingat, penggunaan framework jQuery cukup 1 saja dalam 1 template, apabila ada lebih dari satu, maka script tidak akan bekerja.

$(document).ready(function() {
// Tooltip only Text
$('.tooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="getTooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, 
  function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.getTooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.getTooltip')
        .css({ top: mousey, left: mousex })
   });
});

Semoga bermanfaat...