web-dev-qa-db-fra.com

Utiliser onmouseover pour afficher les info-bulles en javascript

J'essaie d'utiliser du javascript pour créer de petites boîtes de dialogue qui indiqueront à l'utilisateur comment saisir des données dans un champ lorsqu'elles sont placées dessus. Je suis extrêmement novice en matière d’utilisation de javascript, ce qui me permet de procéder de manière totalement erronée. Ci-dessous mon code:

HTML

        <html>
            <body>

            <div>
            <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
            </div>

            <script>
            function mOver(obj)
            {
            obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>"
            }

            function mOut(obj)
            {
            obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>"
            }
            </script>
            </script>
         </body>


        <style type="text/css">
            #button  {
                border-radius: 50%;
                border: 1px solid black;
                padding-top: 3px;
                padding-bottom: 3px;
            }
            #info   {
                margin-left: 5%;
            }
            #help_container {
                border: 0.5px solid black;
                background-color: #efefef;
                width: 20%;
            }
            #close  {
                float: right;
                margin-top: 1%;
                background-color: #efefef;
                border: 0px solid #efefef;
            }
            #help_text  {
                margin: 5%;
                font-family: Arial;
                font-size: 15px;
            }
        </style> 
</html>

Cependant, la fonction ne fonctionne pas, des changements surviennent lors du survol de la balise button, mais pas les changements que je pensais. J'espérais qu'une petite div apparaisse avec un texte d'aide écrit à l'intérieur. Idéalement, j'aimerais aussi qu'un bouton de fermeture apparaisse dans la div qui puisse appeler une fonction onclick et supprimer la div, mais je ne sais pas comment supprimer des éléments à l'aide de la méthode onlick. Toute aide sur la façon de résoudre la fonction onmouseover ou sur la façon de mettre en œuvre un moyen de fermer la div en utilisant onlick serait grandement appréciée. Merci d’avance.

javascripthtmlcssonclickonmouseover
7
user3298004

Vous pouvez utiliser bootstrap, ou toute autre bibliothèque javascript, avec jQuery dans le même but. Il vaut mieux les utiliser, jetez-y un coup d'œil,

HTML

    <a data-toggle="tooltip" title="add to cart">
        <i class="icon-shopping-cart"></i>
    </a>

Script  

    $('a[data-toggle="tooltip"]').tooltip({
         animated: 'fade',
         placement: 'bottom',
     });


$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});
.cart {
    overflow:hidden;
    padding:10px 3px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart"> 
    <a data-toggle="tooltip" title="add to cart">
        <i class="icon-shopping-cart"> Cart</i>
    </a>
</div>

7
Robin C Samuel

Vous pouvez utiliser uniquement CSS et HTML.

CSS: 

<style type="text/css">
            div#tooltip a span {display: none;}
            div#tooltip a:hover span {display: block;
               position: relative; width: 125px;
               padding: 5px; margin: 10px; z-index: 100;
               color: black; background-color:#FFFFCC; border: 1px solid #ccc;
               font: 10px Verdana, sans-serif; text-align: center;}

            div#tooltip a {
              position:relative;
            }
            div#tooltip a span {
              display:none;
            }
            div#tooltip a:hover span {
              display:block;
              position:absolute; width: 100px;
              color: black; background-color:#FFFFCC; border: 1px solid #ccc;
              font: 10px Verdana, sans-serif; text-align: center;
            }
            div#tooltip a:hover {text-indent:0;}
            #tooltip button { border-radius: 50%;
                border: 1px solid black;
                padding-top: 3px; }
</style>

HTML:  

<div id="tooltip">
            <a href=""><button id="button" >?</button>
                <span>This is an example of some hover text!</span>
            </a>
</div>
4
Vitthal

avec votre code, vous opérez avec le bouton, pas div. pour affecter sur div avec innerHTML vous avez besoin de quelque chose comme ceci:

<div id="my_div">
<button id="button" onmouseover="javascript:mOver('my_div');" onmouseout="javascript:mOut('my_div');">?</button>
</div>

pour que le bouton X fonctionne, utilisez ceci:

<button onclick="javascript:mOut('my_div');">X</button>
1
cyborg86pl

Je ne pense pas que votre fonction js a quelque chose de mal, mais votre structure html est vraiment en désordre. J'ai changé la structure de votre code HTML et réalise la fonction que vous voulez avec le même code que vous fournissez.

<html>
    <head>
    <style type="text/css">
    #button  {
        border-radius: 50%;
        border: 1px solid black;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #info   {
        margin-left: 5%;
    }
    #help_container {
        border: 0.5px solid black;
        background-color: #efefef;
        width: 20%;
    }
    #close  {
        float: right;
        margin-top: 1%;
        background-color: #efefef;
        border: 0px solid #efefef;
    }
    #help_text  {
        margin: 5%;
        font-family: Arial;
        font-size: 15px;
    }
    </style>
    <script>
        function mOver(obj)
        {
        obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>"
        }

        function mOut(obj)
        {
        obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>"
        }
    </script>
    </head>
    <body>
    <div>
    <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
    </div>
    </body>
</html>
1
Fred Wu