DHTML - hover boxes

Posted on 2004-11-30
Last Modified: 2007-12-19
I would like to have links on my "links page" pop up a little box with a description of the link when people hover over the link. However, I really don't want a new browser window for it (for fairly obvious reasons). I have been playing around with onMouseover and onMouseout but I can't seem to get it to work.

What would be the best way of implementing this and can someone help with the code (including the JS if needed....)

Thanks in advance,
- Graham
Question by:topazg
    LVL 33

    Expert Comment

    use teh title property
    <a href = "" title = "This is a search of the best available">Google
    <a href = "" title = "My Email Account">Gmail
    LVL 3

    Author Comment

    I kind of wanted an instant window instead of the delay, and would also like to be able to format the contents with colour and bolding and so on.

    Thanks anyway
    LVL 33

    Accepted Solution

    Check the one at
    <title>Untitled Document</title>
    var x,y, timeout;
    var to = 5000;
    var bd = 1;
    var tablebdcolor = '#00FFFF';
    var tablebgcolor = '#000000';
    var headerbdcolor = '#000000';
    var headerbgcolor = '#000000';
    var cellbdcolor = '#000000';
    var cellbgcolor = '#000000';
    var font_color = '#FFFFFF';
    var font_size = '1';

    function init()
         document.onmousemove = mouseMove;

    function mouseMove(e)
         x = event.x + document.body.scrollLeft;
         y = event.y + document.body.scrollTop;
    function settip(title, desc)

         document.all['tip'].innerHTML = "<table border=" + bd + " bordercolor=" + tablebdcolor + " bgcolor=" + tablebgcolor + "><tr><td bordercolor=" + headerbdcolor + "><font color=" + font_color + " size=" + font_size + ">" + title + "</font></td></tr><tr><td bordercolor=" + cellbdcolor + "><font color=" + font_color + " size=" + font_size + ">" + desc + "</font></td></tr></table>";
         document.all['tip'].style.left = x+10;
         document.all['tip'] = y+15;
         document.all['tip'].style.visibility = 'visible';
         timeout = setTimeout('cleartip()',to);

    function cleartip()
         document.all['tip'].style.visibility = 'hidden';


    <body onload="init();">
    <div id="tip" style="cursor: hand; visibility: hidden; position:absolute;"></div>

    <a href="#" onmouseover="settip('This is a Link','You can click it to goto another page.');" onmouseout="cleartip();">Link</a>

    LVL 3

    Author Comment

    Thanks very much, just what I needed - should have looked in the javascript section :-)
    LVL 33

    Expert Comment

    Thanks for the points and grade

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    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.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    733 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

    21 Experts available now in Live!

    Get 1:1 Help Now