'Help box' when mouse hover

Hi, I see in some sites, very nice help box's. When the mouse hover open a little box's with the help contain.
I don't know the technology behind this box's, so I need help to begin this box's too.
Who know how do box's like the image I put in attachments, any example or simple tutorial.
Regards, JC

Pedro ChagasWebmasterAsked:
Who is Participating?
if you want to show just text in the help box simple example here


or if you want a html page then look here

Pedro ChagasWebmasterAuthor Commented:
Hi, I try to use the first example, but something happening, because don't do the efect.....
My steps was:
I put qtip.js in my server and I call that file with this line I put in the <head>:
<script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>

I create the css file "qTip.css", and I call the style in this way:
@import url("/estilo/qTip.css");

My difficulty is make work the script. I have this Div, and this Div contain a button that calls 'icon_interrogacao.png' (The image is this charactere "?"):
<div id="icone_nivel_concorrencia"><img src="imagem/icon_nivel_concorrencia.jpg" /> <img src="imagem/icon_interrogacao.png" /><br />
<a class="info_flash"><? echo $resultado->nivel_concorrencia; ?></a></div>

I want when mouse over the image 'icon_interrogacao.png' appear the help box.  

I do this changes but still not work:
<div id="icone_nivel_concorrencia"><img src="imagem/icon_nivel_concorrencia.jpg" /> <a href="#" title="this is the contain of help box"><img src="imagem/icon_interrogacao.png" /></a><br />
<a class="info_flash"><? echo $resultado->nivel_concorrencia; ?></a></div>

I don't know what is wrong, please check the code and tell me what I have to change.
Observation: I don't edit the qTip.js file.

Regards, JC

//contain of css file
div#qTip {
 padding: 3px;
 border: 1px solid #666;
 border-right-width: 2px;
 border-bottom-width: 2px;
 display: none;
 background: #999;
 color: #FFF;
 font: bold 9px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;

Open in new window

Pedro ChagasWebmasterAuthor Commented:
I´m sorry, don't have any problem to the script, the reason for don't work is calling qtip.js, I call qTip.js, when correct is qtip.js.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.