1
2
3
4
5

Tutorial : Tooltips






theres someone who request me to do this tutorial :) and i love to use this code cuz its simple and easy .



1. cari  </html> , then copy and paste code ni dekat bawah dia


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

2.  lepas tu copy code ni before </style>


#s-m-t-tooltip {
    background: #262626;/* change the background color */
    font-size: 9px;/* change the font size */
    line-height: 11px;
    font-family: cambria;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #fff;/* change the text color */
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    -moz-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;
}

3. juat simply tambah code ----> title="NAME" <---- ni dekat mana-2 yang korang nak :)

contohnya : <a href="ayunipororo.blogspot.com"  title="kaiwufvn" >★</a>

4. preview and save






Tuesday, May 21, 2013 • 9:50 PM


credit