Title: qTip Effect
Language: Javascript, CSS, XHTML
Author: Craig Erskine, Sazzad Hossain
Demo: http://solardreamstudios.com/_img/learn/css/qtip/qTip.html
Authors Note:
This effect will allow you to have a very cool hover effect using javascript and css. The javascript is the core file that causes the hover effect while the css file controls the layout of it. The credit goes out mostly to Craig Erskine, who explained the steps/procedures very clearly. Without his help I wouldn't be able to post this tutorial. You can also do this in CSS. I will work on the CSS tutorial for the same effect later.
1. Create a file and call it qTip.js and insert the following code
CODE
var qTipTag = "a"; //Which tag do you want to qTip-ize? Keep it lowercase!//
var qTipX = -30; //This is qTip's X offset//
var qTipY = 25; //This is qTip's Y offset//
//There's No need to edit anything below this line//
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;
var anchors = document.getElementsByTagName (qTipTag);
for (var i = 0; i < anchors.length; i ++) {
a = anchors[i];
sTitle = a.getAttribute("title");
if(sTitle) {
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {//IE
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {//Good Browsers
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}
tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}
tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}
window.onload = function () {
tooltip.init ();
}
var qTipX = -30; //This is qTip's X offset//
var qTipY = 25; //This is qTip's Y offset//
//There's No need to edit anything below this line//
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;
var anchors = document.getElementsByTagName (qTipTag);
for (var i = 0; i < anchors.length; i ++) {
a = anchors[i];
sTitle = a.getAttribute("title");
if(sTitle) {
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {//IE
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {//Good Browsers
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}
tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}
tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}
window.onload = function () {
tooltip.init ();
}
Edit the qTip.js file and modify the 3 lines near the top of the document. There are comments after each line that explain what each variable controls. It’s very intuitive but here’s a quick run down:
* qTipTag = the tag that you want to qTip-ize. Make sure to keep this variable lowercase. It’s a good idea to choose a tag that you use on your website and already has title attributes applied. If you use a CMS like TXP then the <a> tag is a good choice.
* qTipX = change this number to move the generated pop up DIV along the x axis. This number can be positive or negative.
* qTipY = change this number to move the generated pop up DIV along the y axis. This number can be positive or negative.
2. Since we have our Javascript file in a different location, we would need to call it on our xhtml page. We can accomplish this by simply pasting the following code before the </head> tag of your page (or below the <head> tag).
CODE
<script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>
3. Now we have the general effect working. You can test it out if you want. Although it works really well, we don't like the look of it. So lets "pimp" it up and make it attracting. We can accomplish this by using Cascading Style Sheets (CSS). Below is a sample code that you can simply paste to your existing CSS file.
CODE
div#qTip {
padding: 3px;
border: 1px solid #666;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, Helvetica, sans-serif;
position: absolute;
z-index: 1000;
}
padding: 3px;
border: 1px solid #666;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, Helvetica, sans-serif;
position: absolute;
z-index: 1000;
}
4. Now that you have the hover effect looking cool, you want to control what you want stated on the hover right? How would you go about that, you ask? Well here's how. You would use the normal <a href="#"> tag, but in addition, we will add title=" ". The content within the title quotes, you will write your hover message. I posted a sample code of how this code should look.
CODE
<a href="#" title="This hover message will show up">Hover</a>
