Description Box using "onmouseover"

Question

I am playing with the onmouseover event in javascript

I would like a little box to pop up and remain up until there is no onmouseover anymore

I think it's called a description box, but I am not sure.

How do I get a little box to pop up with custom text when I put my mouse over certain text, and disappear once I move the mouse to a different object..?

Answer 1

Assuming popup is the ID of your "description box":

HTML

<div id="parent"> <!-- This is the main container, to mouse over --> <div id="popup" style="display: none">description text here</div> </div> 

JavaScript

var e = document.getElementById('parent'); e.onmouseover = function() {   document.getElementById('popup').style.display = 'block'; } e.onmouseout = function() {   document.getElementById('popup').style.display = 'none'; } 

Alternatively you can get rid of JavaScript entirely and do it just with CSS:

CSS

#parent #popup {   display: none; }  #parent:hover #popup {   display: block; } 

Answer 2

Although not necessarily a JavaScript solution, there is also a "title" global tag attribute that may be helpful.

<a href="https://stackoverflow.com/questions/3559467/description-box-on-mouseover" title="This is a title.">Mouseover me</a> 

Mouseover me