Januari 26, 2011  

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>)

 a.tip {
  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;
}

dan Cara Menggunakannya, Contoh Lihat di Bawah Ini...

<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!!!