DHTML - hover boxes

Posted on 2004-11-30
Medium Priority
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
  • 3
  • 2
LVL 33

Expert Comment

ID: 12704385
use teh title property
<a href = "http://www.google.com" title = "This is a search engine.one of the best available">Google
<a href = "http://www.gmail.com" title = "My Email Account">Gmail

Author Comment

ID: 12704418
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

sajuks earned 1000 total points
ID: 12704457
Check the one at http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20678343.html
<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'].style.top = 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>


Author Comment

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

Expert Comment

ID: 12704512
Thanks for the points and grade

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

864 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