del cuadro de descripción usando "onmouseover"

Question

estoy jugando con el evento onmouseover en javascript

Me gustaría una pequeña caja a aparecer y permanecer hasta que no hay onmouseover más

Creo que se llama una descripción caja, pero no estoy seguro.

¿Cómo puedo obtener una pequeña caja para que aparezca un texto personalizado cuando coloco el mouse sobre cierto texto, y desaparezco una vez que muevo el mouse a un objeto diferente ...?

Answer 1

Suponiendo popup es el ID de su "caja de descripción":

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'; 
} 

Alternativamente, usted puede deshacerse de JavaScript por completo y hacerlo sólo con CSS:

CSS

#parent #popup { 
    display: none; 
} 

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

Answer 2

Intentaré hacer esto con el sistema de controlador de eventos .hover() de jQuery, hace que sea fácil mostrar un div con la información sobre herramientas cuando el mouse está sobre el texto, y ocultarlo una vez que se ha ido.

Aquí hay un ejemplo simple.

HTML:

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

CSS básica:

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

jQuery:

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

Answer 3

Bueno, hice una secuencia de comandos simple de dos líneas para esto, es pequeña y hace lo que quiere.

Hay que ver http://jsfiddle.net/9RxLM/

Es una solución de jQuery: D

Answer 4

Aunque no necesariamente una solución JavaScript, hay también un atributo "title" variable global que puede ser útil.

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

Mouseover me