TutorNesia ~ Sebenarnnya saya lebih suka memilih manual tooltip dengan hanya memasang CSS alasannya ringan loading, terutama simple dan kita lebih leluasa memasang dimana kita mau munculkan tooltip, inilah perbedaannya disini. Seperti yang saya pasang di blog ini, coba arahkan cursor ke Menu Down diatas, bagaimana? cukup simple bukan? atau klik tulisan DEMO ini.
01. Login blogger sobat.
02. Jika sudah pastekan kode CSS ini.
/* CSS Tooltip - TutorNesia */
a[data-tooltip]:link, a[data-tooltip]:visited {position: relative;text-decoration: none;}
a[data-tooltip]:before {
content: "";
position: absolute;
border:16px solid;
border-color:#7968B4 transparent transparent transparent;
border-top: 20px solid #7968B4;
visibility: hidden;
top: -20px;left: 50%;
}
a[data-tooltip]:after {
text-shadow:none;
content: attr(data-tooltip);
position: absolute;
color: white;
top: -45px;
left: 0px;
background: #7968B4;
padding: 8px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
white-space: nowrap;
visibility: hidden;
font:15px Arial;
}
a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
visibility: visible;
-moz-transition: visibility 0s linear .6s;
}03. Untuk memunculkan tooltip tersebut kita harus menambahkan data-tooltip="Tulisan tooltip yang mau dimunculkan"
Tulisan tooltip yang mau dimunculkan
Dan inilah contohnya, semoga bermanfaat.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.