Cara Mudah Membuat Tips (Tooltip) di Artikel Blog

Cara Mudah Membuat Tips (Tooltip) di Artikel Blog
Daftar Isi Artikel

Magelang1337.comCara Membuat Tooltip di Artikel dengan CSS. Jika kamu ingin menampilkan sebuah tips dengan popup pakailah sebuah tooltip. Tooltip merupakan sebuah dialog kecil dan simple yang muncul ketika mouse diletakkan (Hover) di sebuah elemen. Pemakaian dari Tooltip biasanya dipakai pada tag <a>, <abbr>, ataupun tag yang lain sifatnya inline. Fungsinya untuk memberikan informasi disebuah teks yang ditunjuk oleh mouse.

Tujuan dari memakai tooltip ini dapat dikatakan untuk menghemat dari pengunjung website. Pengunjung akan dapat langsung penjelasan singkat dari link yang mau dibaca.

Cara Membuat Tooltip dengan CSS

Untuk Cara Membuat Tooltip di Artikel Blog ini secara permanent kamu harus mengedit melalui Edit Template. Caranya tambahkan style di bawah ke template kamu, Ketika sudah terpasang kamu tinggal membuat dalam postingan saja dan cukup menulis html-nya.
  1. Login Blogger 
  2. Pilih Edit Template (HMTL)
  3. Kemudian cari kode </style> letakan kode dibawah ini tepat dibawahnya.
<style type='text/css'>
  /* CSS Tooltip by www.magelang1337.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:#4ee1f5;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:9999;
    box-sizing:border-box;
    border:1px solid #4ee1f5;
    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:&#39;&#39;;
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#4ee1f5;
    border:1px solid #4ee1f5;
}
</style>
Jika sudah selesai klik Simpan. Selanjutnya kamu tinggal menambahkan kode HTML tooltip pada postingan blog. dengan script dibawah ini. Caranya sebagai berikut:
  1. Buat postingan atau halaman baru.
  2. Pilih penulisan mode "HTML" bukan "Compose"
  3. Taruh kode dibawah ini pada posisi sesuai dengan teks yang akan di munculkan tooltip
<div class="tooltip">Sentuh Aku Untuk Melihat Tooltip
    <div class="top-info">
        <h3>Magelang1337</h3><p>
        <p>Magelang1337 membahas tentang Teknologi terbaru, dunia hiburan, tips blogging, tutorial android dan lain-lain tentunya saling berbagi pengalaman dari masing-masing penulis.</p>
        <i></i>
    </div>
Perhatikan script diatas, Silahkan ganti info sesuai dengan alamat blog kamu. Untuk melihat contohnya kamu bisa cek link ini.

DEMO

Demikianlah pembahasan tentang Cara Membuat Tooltip di Artikel Blog yang bisa kami sampaikan. Jika ada pertanyaan kamu bisa komentar dibawah.

Silahkan Komentar dengan bahasa yang sopan :)

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>