Yang perlu kita lakukan hanya menentukan posisi yang sesuai untuk tooltip tersebut, sehingga membuatnya terlihat bergerak, dimana ketika kursor digerakkan pada objek, tooltip dengan elemen tambahan didalamnya ikut bergerak mengikuti gerakan kursor dan ketika kursor keluar dari objek, maka tooltippun akan otomatis menghilang.
Untuk mengiplementasikannya cukup mudah, kita hanya perlu menyisipkan
class="screenshot" pada objekDEMO:
Memberi atribut judul pada tag A
<a href="LINK_URL"
class="screenshot" Memberi Pratinjau Gambar
<a href="LINK_URL"
class="screenshot" [Demo]
Memberi atribut judul dan Pratinjau Gambar
<a href="LINK_URL"
class="screenshot" Untuk memulainya silahkan gunakan data berikut ini, yang dapat kita sisipkan kedalam tag <head> pada template:
1
<script type="text/javascript">
// <![CDATA[
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});
// ]]>
</script>
1
<style type="text/css">
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#ff0;
padding:5px;
display:none;
color:#fff;
}
</style>
Demikian sekilas bagaimana cara membuat tooltip yang dapat menampilkan Preview Gambar. Terimakasih, semoga bermanfaat!
Post A Comment:
0 comments: