tooltips Dengan Menggunakan qTip

Totorial ini berasal dari qrayg.com. Aku hanya repost di sini untuk membuat Anda semua tahu cara menggunakan dan menyesuaikan blog Anda. Contoh Anda bisa mengarahkan kursor anda ke link di halaman ini.




Pertama, membuat file javascript (. Js) dan masukkan kode ini :

var qTipTag = "a,label";
var qTipX = 0;
var qTipY = 15;

tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}

tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "qTip";}
var tipContainer = document.getElementById(tipContainerID);

if(!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}

if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};

var a, sTitle, elements;

var elementList = qTipTag.split(",");
for(var j = 0; j < elements =" document.getElementsByTagName(elementList[j]);" i =" 0;" a =" elements[i];" stitle =" a.getAttribute(" onmouseover =" function()" onmouseout =" function()" move =" function" x="0," y="0;" x =" (document.documentElement" y =" (document.documentElement" x =" evt.pageX;" y =" evt.pageY;" left =" (x" top =" (y" show =" function" innerhtml =" text;" display = "block" hide =" function" innerhtml = "" display = "none" onload =" function">

Upload kode untuk host dan menempatkan link di header

<script language='JavaScript' src='qTip.js' type='text/JavaScript'>

Jangan refresh halaman Anda karena Anda masih untuk menyuntikkan kode CSS untuk CSS file. Buka file CSS Anda dan masukkan kode ini di bagian atas script Anda.

div#qTip {
padding: 4px;
border: 1px solid black;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: green;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: center;
position: absolute;
z-index: 1000;
}

Setiap Perubahan Anda dapat melakukannya di file CSS. Lihat pada bagian ini:

div#qTip {
padding: 4px;
border: 1px solid black;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: green;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: center;
position: absolute;
z-index: 1000;
}

You are Done!