
Lihat Teks "Kumpulan Widget Untuk Mempercantik Blog" pada gambar di atas, itulah yang disebut Balon Tooltip, bagi sobat yang pingin tahu cara membuat dan mempercantiknya silahkan perhatikan langkah-langkah di bawah ini.
- Copy Kode di bawah ini dan letakan di atas kode </head>
<style>#tooltip{width:200px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#fff;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s ease-out;padding:2px 5px;font-size:12px;color:#ff0000;border:1px dashed #ff0000;display:none;font-weight:bold}</style>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>
Script yang berwarna merah sobat boleh edit tampilan nya sesuai keinginan sobat sendiri.
Selamat Mencoba Sob.
Posting Komentar