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

This an old question but for people still looking. In JS you can now use the title property.

button.title = ("Popup text here");

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 mouseover title">Mouseover me</a>

Mouseover me

Answer 3

Well, I made a simple two liner script for this, Its small and does what u want.

Check it http://jsfiddle.net/9RxLM/

Its a jquery solution :D

Answer 4

I'd try doing this with jQuery's .hover() event handler system, it makes it easy to show a div with the tooltip when the mouse is over the text, and hide it once it's gone.

Here's a simple example.

HTML:

​<p id="testText">Some Text</p>
<div id="tooltip">Tooltip Hint Text</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Basic CSS:

​#​tooltip {
display:none;
border:1px solid #F00;
width:150px;
}​

jQuery:

$("#testText").hover(
   function(e){
       $("#tooltip").show();
   },
   function(e){
       $("#tooltip").hide();
  });​​​​​​​​​​

Answer 5

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

HTML

<div id="parent">
This is the main container.
<div id="popup" style="display: none">some 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;
}