Membuat Tooltips dengan CSS ~ KODELOVER

Tooltip sering digunakan untuk menentukan informasi tambahan tentang sesuatu saat pengguna mengarahkan pointer mouse ke sebuah elemen:

Tooltip Dasar
Buat tooltip yang muncul saat pengguna mengarahkan mouse ke elemen:
Contoh:

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

penjelasan
HTML) Gunakan elemen wadah (seperti <div>) dan tambahkan kelas "tooltip" ke dalamnya. Saat mouse pengguna di atas <div> ini, akan muncul teks tooltip.Teks tooltip ditempatkan di dalam elemen inline (seperti <span>) dengan class = "tooltiptext".CSS) Kelas tooltip menggunakan posisi: relatif, yang dibutuhkan untuk memposisikan teks tooltip (posisi: absolut).
Catatan: Lihat contoh di bawah ini tentang cara memposisikan tooltip.
Kelas tooltiptext menyimpan teks tooltip yang sebenarnya. Ini tersembunyi secara default, dan akan terlihat di hover (lihat di bawah). Kami juga menambahkan beberapa gaya dasar untuk itu: lebar 120px, warna latar belakang hitam, warna teks putih, teks terpusat, dan bantalan atas 5 huruf dan bawah.Properti border-radius CSS3 digunakan untuk menambahkan sudut membulat ke teks tooltip.The: hover selector digunakan untuk menampilkan teks tooltip saat pengguna menggerakkan mouse ke <div> dengan class = "tooltip".

Positioning Tooltips
Dalam contoh ini, tooltip ditempatkan di sebelah kanan (kiri: 105%) dari teks "hoverable" (<div>). Perhatikan juga bahwa top: -5px digunakan untuk menempatkannya di tengah elemen kontainernya. Kami menggunakan nomor 5 karena teks tooltip memiliki padding atas dan bawah 5px. Jika ingin meningkatkan paddingnya, juga tingkatkan nilai properti teratas untuk memastikannya tetap berada di tengah (jika ini adalah sesuatu yang diinginkan). Hal yang sama berlaku jika ingin tooltip diletakkan di sebelah kiri.
Tooltip kanan

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

Tooltip kiri

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

Jika ingin tooltip muncul di atas atau di bagian bawah, lihat contoh di bawah ini. Perhatikan bahwa kita menggunakan property margin-left dengan nilai minus 60 pixel. Ini untuk memusatkan tooltip di atas / di bawah teks yang hoverable. Ini disetel ke setengah lebar tooltip (120/2 = 60).

Tooltip teratas

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Tooltip Bawah

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Tooltip Tanda panah
Untuk membuat tanda panah yang seharusnya muncul dari sisi tooltip yang spesifik, tambahkan konten "kosong" setelah tooltip, dengan elemen semu-class :: setelah bersama dengan properti konten. Panah itu sendiri dibuat menggunakan batas. Ini akan membuat tooltip terlihat seperti balon bicara.Contoh ini menunjukkan bagaimana menambahkan tanda panah ke bagian bawah tooltip:
Panah bawah

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

Pejelasan
Posisikan panah di dalam tooltip: top: 100% akan meletakkan panah di bagian bawah tooltip. Kiri: 50% akan memusatkan panah.
Catatan: Properti dengan batas lebar menentukan ukuran panah. Jika mengubah ini, ubah juga nilai margin-left menjadi sama. Ini akan menjaga panah terpusat.Warna border digunakan untuk mengubah konten menjadi tanda panah. Kami mengatur batas atas menjadi hitam, dan sisanya menjadi transparan. Jika semua sisi hitam, maka akan berakhir dengan kotak kotak hitam.Contoh ini menunjukkan bagaimana menambahkan panah ke bagian atas tooltip. Perhatikan bahwa kita menetapkan warna batas bawah saat ini:
Panah atas

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Contoh ini menunjukkan bagaimana menambahkan tanda panah di sebelah kiri tooltip:

Panah Kiri

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Contoh ini menunjukkan cara menambahkan tanda panah di sebelah kanan tooltip:

Panah kanan

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Fade In Tooltips (Animasi)

Jika ingin memudar dalam teks tooltip saat akan terlihat, dapat menggunakan properti transisi CSS3 bersama dengan properti opacity, dan beralih dari yang sama sekali tidak terlihat hingga 100% terlihat, dalam sejumlah detik yang ditentukan (1 detik Dalam contoh kita):
Contoh

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

KODELOVER

Membuat Tooltips dengan CSS

Related Post