Uso de “onmouseover” para mostrar información sobre herramientas en JavaScript

Solución:

Puede usar Bootstrap, o cualquier otra biblioteca de JavaScript, junto con jQuery para el mismo propósito. Es mejor usarlos.

Por favor, eche un vistazo al código a continuación.

HTML

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

JavaScript y 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="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>

Solo puede usar CSS y 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>

---

---

Utiliza Nuestro Buscador