Cara Membuat Tooltip Full CSS Tanpa Bootstrap

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
4

Hi Web Developer! kembali lagi bersama guru design, kali ini guru design akan berbagi tutorial cara membuat tooltip full css tanpa bootstrap. sebelumnya saya akan menjelaskan terlebih dahulu tooltip itu apa?

 

Cara Membuat Tooltip Full CSS Tanpa Bootstrap

Pengertian Tooltip

Tooltip adalah sebuah tampilan informasi bisa gambar bisa text yang tampil saat pointer di arahkan pada sebuah item tooltip. banyak cara untuk membuat tooltip, tooltip juga ada yang menyediakan informasi lengkap dan ada yang singkat tergantung kebutuhan.

Bagaimana Cara Membuat Tooltip Full CSS

Tambahkan kode html kedalam kode template

Silahkan tambahkan style di bawah kedalam template kalian masing-masing, tujuannya adalah supaya kalian tidak perlu menulis ulang style css ketika membuat tooltip dalam postingan cukup menulis html-nya saja.

  1. Pilih menu tema
  2. Pilih edit HTML
  3. Cari code head penutup </head> atau gabung dengan css yang sudah ada kemudian copy dan paste.
<div class="tooltip">Sentuh Aku Untuk Melihat Tentangku
    <div class="top-info">
        <h3>Guru Design</h3>
        <p>Blog tutorial pemrograman, informasi seputar ilmu pengetahuan umum & teknologi, SEO, PHP, jQuery, CSS, HTML, JavaScript, Database, Widget & Web Tools.</p>
        <i></i>
    </div>
</div>

Tambahkan style css tooltip

Silahkan copy dan paste kode tooltip berikut di postingan kalian, bisa di sesuaikan sendiri text informasi yang di ingikan.

<style type="text/css">
  /* CSS Tooltip by www.gurudzgn.com */
  .tooltip {
    display:inline-block;
    position:relative;
}

.tooltip .top-info {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:0 10px;
    color:#444444;
    background-color:#CCCC33;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:9999;
    box-sizing:border-box;
    border:1px solid #CCCC33;
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .top-info {
    visibility:visible; opacity:1;
}

.tooltip .top-info i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top-info i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#CCCC33;
    border:1px solid #CCCC33;
}
</style>

Jika ada yang kurang jelas, jangan sungkan tanyakan di kolom komentar.

Result

Sekian tutorial Cara Membuat Tooltip Full CSS Tanpa Bootstrap semoga bermanfaat, terimakasih.

Rafiqi, S.Kom.