Bagaimana cara membuat tooltip title pada blogger....?
1. Langkah Pertama
Masukkan code CSS berikut diatas ]]></b:skin>
#tooltip {
position:absolute;
z-index:999;
background:#333;
border:1px solid #000;
font:bold 11px Tahoma,Arial,Sans-Seri;
box-shadow:0 1px 3px rgba(0,0,0,0.4);
padding:5px 10px;
color:#fff;
max-width:170px;
word-wrap;break-word;
display:none
}
2. Langkah Kedua
Masukkan scipt JQuery ini diatas </head>
<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
3. Langkah Ketiga
Pasang script berikut diatas </body>
<script type='text/javascript'>
//<![CDATA[
/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").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.tooltip").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>
4. Langkah Keempat
Sisipkan code class='tooltip' pada setiap Link yang ingin diberi tooltip titlenya. Dan jangan lupa, berikan title pada setiap link yg ingin diberi tooltip
5. Contoh Penerapan
Ini contoh penerapan pada Navigasi blog ini
<ul> <li><a class='tooltip' href='/' title='Home'><strong>Home</strong></a></li> <li><a class='tooltip' href='/feeds/posts/summary?alt=rss' rel='nofollow' title='RSS Feed'><strong>RSS</strong></a></li> <li><a class='tooltip' href='/p/daftarisi.html' title='Daftar Isi'><strong>Daftar Isi</strong></a></li> <li><a class='tooltip' href='#sidebar4' title='Semua Label'><strong>Label</strong></a></li> <li><a class='tooltip' href='/p/forum.html' title='Mini Forum'><strong>Mini Forum</strong></a></li> </ul>
tooltip :)
Post a Comment