'Help box' when mouse hover

Posted on 2009-02-24
Last Modified: 2012-05-06
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

Question by:Pedro Chagas
    LVL 17

    Accepted Solution

    if you want to show just text in the help box simple example here

    or if you want a html page then look here
    LVL 3

    Author Comment

    by:Pedro Chagas
    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

    LVL 3

    Author Comment

    by:Pedro Chagas
    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now