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>