May 1, 2013

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.


.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;
}


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

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



DEMO :



Bagaimana??? Apakah sudah berhasil menrapkannya???

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

23 comments

  1. jago banget nih urusan design blog... sy ingin belajar banyak biar pinter spt mbak aiizah :)

    ReplyDelete
    Replies
    1. ^_^ saya juga masih belajar mba,terima kasih yah kunjungannya... :-bd

      Delete
  2. isi blognya menarik sekali..
    sangat berguna buat kebutuhan desain blog.
    nice share mba

    ReplyDelete
  3. keren Mba Bro satu ini kalo soal design2 Blog
    xiix
    kalah ane

    ReplyDelete
  4. wah keren tutorialnya mis, terimakasih banyak sudah berbagi tooltip bisa memperindah blog

    ReplyDelete
    Replies
    1. iya bener sekali sob...btw thanks atas kunjungannya... ^_^

      Delete
  5. gt tow gan caranya,,,,sangat membantu. saya dah follow gan,,,, kunjungan blik gan: http://dualstars.blogspot.com/

    ReplyDelete
    Replies
    1. iya gan bener buanget...terima kasih gan...

      Delete
  6. wah cantik banget nih, keren mbak tutorialnya

    ReplyDelete
  7. uda sy follow sob
    follbacknya ditunggu

    http://ashare-xp.blogspot.com

    ReplyDelete
    Replies
    1. terima kasih sob, btw udah saya follow duluan kan sob? ^_^

      Delete
  8. wiihhhhh, hebat nih. tapi css disimpannya di mana gan .hhihi saya pemula pleased

    ReplyDelete