Using "onmouseover" to display a tooltip in JavaScript
You can use Bootstrap, or any other JavaScript library, along with jQuery for the same purpose. It's better to use them.
Please have a look at the code below.
HTML
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"></i>
</a>
JavaScript and 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>
You can use CSS and html only..
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>