Membuat CSS3 Simple Tooltip

Mungkin temen-temen sudah banyak yang mengetahui mengenai tooltip, serta kreasi dan modifikasinya. Banyak sekali memang tutorial-tutorial mengenai tooltip.

Namun, kali ini saya ingin share bagaimana membuat tooltip yang simple namun tetap terlihat "cute" tentunya dengan visualisasi warna yang menarik dan tentu saja, bisa dikreasikan kembali sesuka hati.

CSS

.tooltip
{
  position: relative;
  background: none;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #D580FE;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba
(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba
(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #D580FE;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}
Copy Kode

JAVASCRIPT

<script type="text/javascript">

$(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {            
      $('.tooltip').mouseover(function(){              
            $(this).children('span').show();                
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });    

</script>

Lalu bagaimana implementasinya ???

Temen-temen bisa membuat sebuah postingan dimana didalamnya terdapat satu atau lebih kata atau kalimat yang ingin diberikan keterangan dengan menampilkan tooltipnya.

XHTML

<a href="#" class="tooltip">
  Isi teks disini
  <span>Deskripsi Tooltip</span>
    </a>

Bagaimana??? Apakah sudah berhasil menrapkannya???

Jangan lupa untuk meninggalkan komentar dan terima kasih semoga bermanfaat...