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

User · Answer

The CSS Tooltip allows you to format the popup as you like as any div section  And no Javascript needed

User · Answer

Assuming popup is the ID of your  description box    HTML   lt div id  parent  gt   lt  -- This is the main container  to mouse over -- gt   lt div id  popup  style  display  none  gt description text here lt  div gt   lt  div gt    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

User · Answer

This an old question but for people still looking  In JS you can now use the title property    button title     Popup text here

User · Answer

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     lt p id  testText  gt Some Text lt  p gt   lt div id  tooltip  gt Tooltip Hint Text lt  div gt                                               Basic CSS      tooltip   display none  border 1px solid  F00  width 150px       jQuery       testText   hover     function e              tooltip   show             function e              tooltip   hide

User · Answer

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

User · Answer

Although not necessarily a JavaScript solution  there is also a  title  global tag attribute that may be helpful    lt a href  https   stackoverflow com questions 3559467 description-box-on-mouseover  title  This is a title   gt Mouseover me lt  a gt    Mouseover me

[javascript] Description Box using "onmouseover"

Examples related to javascript

Examples related to tooltip