Magelang1337.com - Cara 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.
- Login Blogger
- Pilih Edit Template (HMTL)
- 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:'';
position:absolute;
width:12px;
height:12px;
left:50%;
transform:translate(-50%,-50%) rotate(45deg);
background-color:#4ee1f5;
border:1px solid #4ee1f5;
}
</style>- Buat postingan atau halaman baru.
- Pilih penulisan mode "HTML" bukan "Compose"
- 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>Demikianlah pembahasan tentang Cara Membuat Tooltip di Artikel Blog yang bisa kami sampaikan. Jika ada pertanyaan kamu bisa komentar dibawah.
