Online Info

Browse Manual » Wiring » ala » buat » css » keren » simple » tapi » tooltip » utta » with » Buat Tooltip Simple tapi Keren With CSS Ala UTta

---

Buat Tooltip Simple tapi Keren With CSS Ala UTta

Tooltip adalah sebuah keterangan dari suatu Link, Tooltip Berguna untuk Memberi keterangan atau sedikit penjelasan tentang isi dari pada Link tersebut,ini berguna agar orang mengetahui tentang isi dari Link/keterangan object tersebut silahkan lihat demo tooltip dibawah ini.


Arahkan MouseNya ke gue donK!


Nah Bagaimana Apakah Anda Tertarik bila ia silahkan ikuti langkah - langkah nya di bawah ini.

/* UTtoltip */
#UTtoltip {opacity:0.6;min-width:150px;max-width:200px;border:1px solid #555;border-radius:8px;line-height:16px;
box-shadow:1px 1px 10px blue;-moz-box-shadow:1px 1px 10px blue;-webkit-box-shadow:1px 1px 10px blue;
background:blue url(URL) top right no-repeat;padding:15px;color:#fff;font-family:century gothic;font-size:13px;font-weight:600;display:none;text-shadow:1px 2px 2px #000;position:absolute;transition:1s;-o-transition:1s;-moz-transition:1s;-webkit-transition:1s;-ms-transition:1s;
}

4. Selanjutnya Masukkan kode javascript berikut diatas </body>

<!-- UTtoltip -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
this.UTtoltip = function(){ 
        xOffset = 10;
        yOffset = 20;   
    $("a.UTtoltip").hover(function(e){            
        this.t = this.title;
        this.title = "";          
        $("body").append("<p id=UTtoltip>"+ this.t +"</p>");
        $("#UTtoltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast"); 
    },
    function(){
        this.title = this.t; 
        $("#UTtoltip").remove();
   });
    $("a.UTtoltip").mousemove(function(e){
        $("#UTtoltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
   });  
};
$(document).ready(function(){
    UTtoltip();
});
</script>
<!-- End UTtoltip -->

5. Simpan Template.

Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memasang ditemplate sobat, maka kode diatas tidak perlu dipasang lagi (biar tidak double).

6. Langkah terakhir dengan pemanggilan kode "Tooltip"Nya.

<a class="UTtoltip" href="URL-LINK" title="TITLE-TOOLTIP!">Link Here!</a>

<a class="UTtoltip" href="URL-LINK" title="TITLE-TOOLTIP!"><img src="URL-IMAGE.JPG" width="300" height=225px" class="UTtoltip"/></a>

7. Gunakan xHTML dalam posting atau bagian lain blog.
8. Selesai deh.hehee...