BUBLE TOOLTIP SEDERHANA DENGAN CSS
Sebelumnnya, Saya Minta Maaf, Udah Jarang Nulis di Blog Ini. Soalnya Banyak Ulangan di Sekolah. Ohya, di Posting Kali Ini, Saya Hanya Sedkit...
Sebelumnnya, Saya Minta Maaf, Udah Jarang Nulis di Blog Ini. Soalnya Banyak Ulangan di Sekolah. Ohya, di Posting Kali Ini, Saya Hanya Sedkit Share Tentang Tooltip. Tooltipnya Sederhana Banget, dan Tooltip Ini Juga di Design dengan Panah di Bawahnya. Mungkin Sudah Banyak yang Tahu, Tooltip Ini Hanya Menggunakan CSS Tanpa Image. Panahnyapun di Buat dengan CSS Border. Untuk Demonya, Hover Link di Bawah Ini Ya!!!
Hover Me To Buble Tooltip
Untuk Membuat Tooltip Tersebut, Nich Kode CSSnya (Letakkan di Atas Kode ]]></b:skin>)
Semoga, Posting yang Singkat dan Sederhana Ini, Namun Dapat Bermanfaat Ya!!!
Hover Me To Buble Tooltip
Untuk Membuat Tooltip Tersebut, Nich Kode CSSnya (Letakkan di Atas Kode ]]></b:skin>)
a.tip {dan Cara Menggunakannya, Contoh Lihat di Bawah Ini...
position: relative;
text-decoration: none;
}
a.tip:hover:before {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -43px;
background: #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #fff;
font-size: .86em;
}
a.tip:hover:after {
position: absolute;
display: block;
content: "";
border-color: #000 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top: -11px;
left:1em;
}
<a class="tip" href="Alamat Link Kamu" title="di Sinilah Teks Untuk Keterangan Link Atau Tooltip">Nama Link Kamu</a>Gak Rumitkan???
Semoga, Posting yang Singkat dan Sederhana Ini, Namun Dapat Bermanfaat Ya!!!
7 komentar
ini yang saya cari dari dulu, akhirnya ketemu dech disini..
Replythank udh share... salam kenal...
@al aryna
Replyyupz..
thanks udh bkunjung di blog yang sederhana ini..
salam kenal juga..
keren tooltips nya....
Replymakasih bang,
Replybiasa aja kuq tooltipnya, kalau di design lagi pasti lebih keren!!!
Iya, kalau warna backgound dibuat menggunakan pewarnaan rgba dengan efek transparasi maka lebih keren lagi.
Replykenapa gak di kasih Jquerynya????
Replyj
Reply