Cara Membuat Tooltip Sederhana dengan CSS

Cara Membuat Tooltip Sederhana dengan CSS - Tooltips merupakan informasi tambahan yang ada pada sebuah elemen, contohnya adalah informasi tambahan pada elemen teks. Nah, pada kesempatan kali ini saya akan coba membuat tooltip sederhana dengan CSS, buat buat kalian yang ingin membuat tooltip bisa mengikuti langkah - langkahnya berikut ini.

Pada kasus tooltip yang akan saya buat kali ini, yaitu menambahkan informasi tambahan pada elemen teks. Untuk membuatnya silahkan kalian ketikan sintak HTML berikut untuk membuat elemen teksnya.

<body>
    <div class="teks">Hover me!
      <span class="tooltip-teks">Hallo World!</span>
    </div>
</body>

Setelah menentukan elemen yang akan dikenai tooltip, langkah selanjutnya adalah membuat efek tootltip pada elemen teksnya, untuk membuatnya silahkan kalian bisa ketikan sintak CSS berikut ini.

<style>
    .teks {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    .teks .tooltip-teks {
        visibility: hidden;
        width: 120px;
        background-color: darkcyan;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
    }
    .teks:hover .tooltip-teks {
        visibility: visible;
    }
</style>

Setelah sintak HTML dan CSS telah diketikan semua, langkah terakhir simpan filenya kemudian kalian bisa buka pada browser masing - masing dan lihat hasilnya. Maka ketika kalian arahkan kursor terhadap elemen teksnya maka akan muncul informasi tambahan dari tooltip nya. 
Baik, cukup sekian tutorial bagaimana Cara Membuat Tooltip Sederhana dengan CSS, semoga bermanfaat dan sampai jumpa ditutorial dumetschool selanjutnya :)

12 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat