Sweet Tooltips

Valleria req tooltips... apa sih tooltips? Coba hover ini. Mau kan? Ada tulisannya kan?

Aku dapat tuto dari Ananda. Oke dah, langsung yak!

Blogskins :

  • Cari kode </head> ya!
  • Lalu copy kode di bawah ini :

<script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js" type="text/javascript">
<script>
    (function($){
        $(document).ready(function(){
            $(&quot;[title]&quot;).style_my_tooltips();
        });
    })(jQuery);
</script>

  • Lalu paste di ATAS kode </head> tadi.
  • Kalau sudah ada, tidak usah pakai cara tadi ya! Langsung seperti ini :
  • Cari kode </style>
  • Lalu paste kode ini di ATAS-nya.
#s-m-t-tooltip { background: url(URL Background);
font-size: 12px;
line-height: 12px;
font-family: calibri;
letter-spacing: 2px;
text-transform: lowercase;
color: #000;
text-align: left;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
border: 2px dashed orange;
border-left: 15px solid orange;
border-right: 15px solid orange;
-moz-box-shadow: 0 0 0px 2px yellow;
-webkit-box-shadow: 0 0 0px 3px yellow;
}

Note :
Blue : Background tooltips-nya
Fuchsia : nama font
Orange : warna border-nya
Yellow : Warna shadow

3 komentar:

  1. Boleh tanya ada masalah nih
    kode style ku banyak bgt

    BalasHapus
  2. Boleh tanya ada masalah nih
    kode style ku banyak bgt

    BalasHapus
    Balasan
    1. Coba pilih kode style yang paling terakhir

      Hapus