Cara Membuat Tooltip Teks Kustom Saat Hover Menggunakan Script CSS Sederhana (Tanpa JavaScript)

Dalam merancang User Interface (UI) website yang baik, informasi harus disampaikan dengan jelas tanpa memenuhi layar. Di sinilah Tooltip berperan. Tooltip adalah kotak teks kecil yang muncul saat kursor diarahkan (hover) ke elemen tertentu, memberikan penjelasan tambahan tanpa mengganggu tata letak halaman.

Secara default, HTML memiliki atribut title untuk menampilkan tooltip. Namun, tampilannya kaku, lambat muncul, dan tidak bisa dikustomisasi sesuai branding website Anda.

Banyak tutorial menyarankan penggunaan plugin JavaScript atau jQuery untuk membuat tooltip cantik. Padahal, hal tersebut bisa memperberat loading website dan menurunkan skor Core Web Vitals (faktor penting SEO dan AdSense).

Pada panduan ini, saya akan membagikan cara membuat Tooltip Kustom Modern hanya dengan menggunakan HTML5 dan CSS3 Murni. Ringan, cepat, dan 100% responsif.

Mengapa Menggunakan “Pure CSS” untuk Tooltip?

Sebelum masuk ke teknis, pahami mengapa metode ini menaikkan kualitas (value) website Anda di mata Google:

1. Performa Tinggi: Tidak ada file .js tambahan yang harus dimuat browser.
2. SEO Friendly: Teks di dalam tooltip tetap terbaca oleh bot perayap Google.
3. Fleksibilitas Desain: Anda memiliki kendali penuh atas warna, animasi, dan posisi.

Konsep Teknis: Atribut data-* dan Pseudo-Element

Rahasia dari teknik ini adalah penggunaan atribut HTML5 data-tooltip dan fungsi CSS attr(). Kita tidak perlu membuat elemen div atau span baru yang mengotori struktur HTML. Kita hanya meminjam konten dari atribut elemen tersebut.

Langkah 1: Struktur HTML

Sangat sederhana. Anda hanya perlu menambahkan atribut data-tooltip="Pesan Anda" pada elemen apa saja (teks, tombol, atau link). Dan tambahkan class tooltip untuk menandainya.

Salin kode ini ke editor HTML Anda:

HTML<div class="container">
    <p>
        Arahkan kursor Anda ke 
        <span class="tooltip" data-tooltip="Halo! Saya adalah Tooltip CSS murni.">
            Teks Ini
        </span> 
        untuk melihat keajaiban.
    </p>

    <br>

    <!-- Contoh pada Tombol -->
    <button class="tooltip" data-tooltip="Klik untuk mengunduh file PDF">
        Download File
    </button>
</div>

Langkah 2: Script CSS (Styling & Logika)

Sekarang, mari kita buat “magis”-nya bekerja. Tambahkan kode berikut ke dalam file style.css Anda.

CSS/* 1. Container Tooltip */
.tooltip {
    position: relative; /* Wajib: menjadi acuan posisi tooltip */
    cursor: pointer;
    border-bottom: 1px dashed #333; /* Penanda visual bahwa ini ada tooltipnya */
    color: #007bff;
    font-weight: bold;
}

/* 2. Membuat Kotak Tooltip (Pseudo-Element Before) */
.tooltip::before {
    content: attr(data-tooltip); /* Mengambil teks dari HTML */
    position: absolute;
    bottom: 125%; /* Posisi di atas elemen */
    left: 50%;
    transform: translateX(-50%);
    
    /* Styling Tampilan */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    width: max-content;
    max-width: 200px; /* Batas lebar agar tidak terlalu panjang */
    font-size: 14px;
    font-weight: normal;
    z-index: 100;
    
    /* Efek Sembunyi (Default) */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease; /* Animasi halus */
}

/* 3. Membuat Panah Kecil (Pseudo-Element After) */
.tooltip::after {
    content: "";
    position: absolute;
    bottom: 115%; /* Sedikit di bawah kotak utama */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Membuat segitiga dengan border CSS */
    border-color: #333 transparent transparent transparent;
    
    /* Efek Sembunyi (Default) */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
    z-index: 100;
}

/* 4. Efek Hover (Memunculkan Tooltip) */
.tooltip:hover::before {
    visibility: visible;
    opacity: 1;
    bottom: 135%; /* Gerakan sedikit naik ke atas */
}

.tooltip:hover::after {
    visibility: visible;
    opacity: 1;
    bottom: 125%; /* Gerakan sedikit naik ke atas */
}

Penjelasan Mendalam Kode (Agar Anda Paham)

Untuk menghindari label “Low Value Content”, Anda harus memahami apa yang Anda tulis. Berikut bedah kodenya:

1. position: relative: Pada class .tooltip, ini berfungsi sebagai “jangkar”. Tanpa ini, tooltip yang menggunakan absolute akan melayang tidak tentu arah mengikuti body website, bukan mengikuti elemen teksnya.
2. content: attr(data-tooltip): Ini adalah fitur canggih CSS3. CSS secara dinamis mengambil nilai teks yang Anda tulis di HTML (data-tooltip="...") dan menampilkannya. Ini membuat Anda tidak perlu menulis teks dua kali.
3. Teknik Segitiga CSS: Pada .tooltip::after, kita menggunakan teknik border transparan untuk membuat panah kecil di bawah tooltip agar terlihat menyatu dengan elemen asalnya.
4. Animasi Transisi: Kita tidak menggunakan display: none ke display: block karena properti display tidak bisa dianimasikan. Sebaliknya, kita menggunakan kombinasi visibility dan opacity agar munculnya halus (fade-in).

Kustomisasi Posisi (Kanan, Kiri, Bawah)

Kode di atas menampilkan tooltip di bagian Atas (Top). Bagaimana jika Anda ingin menampilkannya di posisi lain? Anda cukup mengubah properti top, bottom, left, right, dan transform.

Contoh untuk Posisi Bawah (Bottom):

CSS/* Ubah bagian hover ::before */
.tooltip:hover::before {
    top: 135%; /* Pindah ke bawah */
    bottom: auto; 
}
/* Anda juga perlu membalik arah panah border pada ::after */

Aksesibilitas (Penting untuk SEO & AdSense)

Google sangat menyukai website yang ramah aksesibilitas (Inclusive Design). Tooltip berbasis CSS ini memiliki kelemahan: pembaca layar (Screen Reader) mungkin tidak otomatis membacanya sebagai “judul”.

Untuk mengatasinya, pastikan Anda juga menambahkan atribut aria-label yang isinya sama dengan tooltip, terutama jika elemen tersebut adalah ikon tanpa teks.

HTML<button class="tooltip" data-tooltip="Cari Artikel" aria-label="Cari Artikel">
   <i class="icon-search"></i>
</button>

Kesimpulan

Membuat fitur canggih seperti Tooltip Kustom ternyata tidak selalu membutuhkan JavaScript yang rumit. Dengan memanfaatkan Pseudo-elements CSS dan Atribut Data HTML, Anda bisa menciptakan antarmuka yang bersih, cepat, dan profesional.

Penerapan kode yang efisien seperti ini tidak hanya mempercantik blog Anda, tetapi juga menjaga performa loading speed tetap hijau di PageSpeed Insights, yang merupakan salah satu kunci utama diterima dan sukses di Google AdSense.

Selamat mencoba dan berkreasi dengan desain tooltip Anda sendiri!