Description de la Boîte à l'aide de “onmouseover”

Je suis à jouer avec les onmouseover des événements en javascript

Je voudrais un peu de boîte de pop up et de rester en place jusqu'à ce qu'il n'y a pas de onmouseover plus

Je pense que c'est appelé une description de la boîte, mais je ne suis pas sûr.

Comment puis-je obtenir une petite boîte de pop-up avec texte personnalisé quand je mets ma souris sur certains textes, et disparaissent une fois que je bouge la souris à un autre objet..?

InformationsquelleAutor l--''''''---------'''''''''''' | 2010-08-24
  1. 35

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

    Sinon, vous pouvez vous débarrasser de JavaScript entièrement et de le faire juste avec les CSS:

    CSS

    #parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}
    • .parent ==> #parent
    • aussi .popup ==> #popup
    • J'ai trouvé le CSS solution ne fonctionne pas, à moins que le style="display: none" est retiré de la div
    InformationsquelleAutor casablanca
  2. 23

    Bien que pas nécessairement une solution JavaScript, il y a aussi un "titre" global attribut de balise qui peut être utile.

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

    Mouseover moi

    • Tout ceci ne répond pas à la question posée, il supprime le besoin de javascript pour résoudre le problème implicite par la question. Très agréable. +1
    • Rien ne s'est passé quand j'ai fait un passage de la souris. Je suppose que cette méthode n'est pas aussi fiable que le CSS un. Mais il pourrait simplement être de mon navigateur internet. À l'aide de Chrome 49.0.2623.112 m
    • il ne fonctionne pas, vous devez attendre une seconde avant que le titre vient.
    InformationsquelleAutor Uila
  3. 8

    Bien, j'ai fait un simple de deux paquebot de script pour cette, de Sa petite et fait ce que tu veux.

    Vérifier
    http://jsfiddle.net/9RxLM/

    Ses jquery solution 😀

    • Cette solution n'est pas optimale si je suis en train de mettre des liens et des trucs, l'utilisateur doit cliquer depuis le placement de la boîte est indépendant de l'élément déclencheur. C'est pour illustrer le problème (que j'ai aussi) jsfiddle.net/9RxLM/6078
    • 20 min plus tard, avec le jsfiddle outil j'ai pu trouver une solution: ajouter une propriété "position: relative;" parents".tiptext") et le jeu de "gauche"-la propriété à l'enfant".description") à n'importe quelle valeur, (par exemple, "0px"), comme ceci: jsfiddle.net/9RxLM/6079
    InformationsquelleAutor Starx
  4. 2

    Je vais essayer de le faire avec jQuery .hover() gestionnaire d'événements du système, il est facile de montrer un div avec l'info-bulle lorsque la souris est sur le texte, et de le cacher à la fois, c'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();
  });​​​​​​​​​​
    InformationsquelleAutor Trafalmadorian
  5. 2

    Ce une vieille question, mais pour les gens toujours à la recherche. En JS vous pouvez maintenant utiliser le title de la propriété. 

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