Qtip Effect

[IamShipon1988]

Sorry guys and gals, due to the lack of time on my hand, I can't go too much into detail of what each line of the code does. I worked on this tutorial a long time ago and found it lying around in my server. Since it did gain some good replies, I thought why not share it with you.

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 ();
}

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;
}

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>

[maxupload]

NICE POST KEEP IT UP.......

[Andrew]

Man where where was this a week ago when someone asked me how to do this on the IRC.

Great post!!

[IamShipon1988]

Thank you max upload and sorry Trippin. I didn't even know that this tutorial got approved. LOL. I like this technique because the hover effect actually moves with your mouse.

[uncled1023]

yes, i love this tut. i am using it now.

[IamShipon1988]

Glad to hear you like it. I'll try to come up with some more CSS you could use.

[uncled1023]

um yea, i tried it with IE, and it doesnt work...

[FootballMan]

Works like a charm, great tutorial!

[IamShipon1988]

um yea, i tried it with IE, and it doesnt work...

Which version of IE are you using. It works on IE6 and IE7 for me here.

[Jenie]

wow. thanks for the tip

[IamShipon1988]

Your welcome Jenie.

[savel]

Excellent, script works/tested on MSIE 6, Opera 9, Firefox 2+3. Easy to set and use even for me (Javascript novice).

Does somebody knows how to add an time delay to show tip?
I tested: setTimeout("this.tip.style.display = 'block';", 500); at tooltip.show function but without success. Sorry Gurus, again - I am a Javascript novice!

[IamShipon1988]

That is a bit harder in this instance since it's mostly just function commands we are giving. I would recommend you use this version of the qtip in your case.

[savel]

What a pitty! I have tested dozens JS tooltips, spent 2 days googling, and only this one was reliable, small .. just missing delay!
I will try your link, but if I see 90kB of code just for showing tooltips, that is not likeable to me.

Thanks for lightning help!

[IamShipon1988]

I have a feeling you are using too much. Since it is already defined that the item is a block, all you need to do is delay it. Have you tried just putting

CODE

setTimeout(thisfunction(),5000)

[savel]

I have a feeling you are using too much. Since it is already defined that the item is a block, all you need to do is delay it. Have you tried just putting

CODE

setTimeout(thisfunction(),5000)

Sorry do not understand. I look one more into the code and only suitable place for modification seems to be here:

CODE

original: a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};

I replaced by:

CODE

a.onmouseover = setTimeOut("function() {tooltip.show(this.getAttribute('tiptitle'))};",500);

But MSIE says: error: the object was expected.

[EMOruffino]

Have you seen this one yet?

http://cssglobe.com/lab/tooltip/03/

[savel]

Have you seen this one yet?

http://cssglobe.com/lab/tooltip/03/

Thanks, nice, but impossible to set delay.

What I am looking for:
a/ replace all standard titles on the page (content based on values of attributes within the HTML element itself)
b/ set delay
c/ use special class for css styling some links if neccessary

My old script - see http://www.eminenc.cz if interested - was fine, but its incompatible with my new js table sort script.