Skip to content

Utiliser “onmouseover” pour afficher une info-bulle en JavaScript

Solution:

Vous pouvez utiliser Bootstrap ou toute autre bibliothèque JavaScript, avec jQuery dans le même but. Il vaut mieux les utiliser.

Veuillez consulter le code ci-dessous.

HTML

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

JavaScript et CSS

$('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="https://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>

Vous ne pouvez utiliser que 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>



Articles Similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *