web-dev-qa-db-fra.com

Description Boîte utilisant "onmouseover"

Je joue avec l'événement onmouseover en javascript

J'aimerais qu'une petite boîte apparaisse et reste jusqu'à ce qu'il n'y ait plus de onmouseover

Je pense que cela s'appelle une boîte de description, mais je ne suis pas sûr.

Comment puis-je faire apparaître une petite boîte avec du texte personnalisé lorsque je place ma souris sur un certain texte et disparaître une fois que je déplace la souris sur un autre objet ..?

javascripttooltip
23
l--''''''---------''''''''''''

En supposant que popup est l'ID de votre "zone de description":

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

Alternativement, vous pouvez vous débarrasser complètement de JavaScript et le faire simplement avec CSS:

CSS 

#parent #popup {
  display: none;
}

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

Bien qu'il ne s'agisse pas nécessairement d'une solution JavaScript, il existe également un attribut de balise globale "title" qui peut être utile.

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

Passez la souris sur moi

23
Uila

Eh bien, j'ai fait un simple script à deux lignes pour cela, c'est petit et fait ce que vous voulez.

Vérifiez-le http://jsfiddle.net/9RxLM/

C'est une solution jquery: D

8
Starx

J'essaierais de le faire avec le système de gestionnaire d'événements . Hover () de jQuery, il est facile d'afficher un div avec l'info-bulle lorsque la souris survole le texte et de le masquer une fois qu'il est parti.

Voici un exemple simple.

HTML:

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

CSS de base:

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

jQuery:

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

C'est une vieille question mais pour les gens qui cherchent toujours. Dans JS, vous pouvez désormais utiliser la propriété title.

button.title = ("Popup text here");
2
Display Name