Tooltip

Display a tooltip when mouseenter

HTML

<div class="item citrus">
 <a href="#water-ll">
<img src="../../hplussport.com/wp-content/uploads/2015/12/mineral-water-lemon-lime_400x600.jpg" width="400" height="600" alt="mineral-water-lemon-lime_400x600">
<h3>Lemon-Lime</h3>
 <p> $3.50/bottle</p>
<div class="tt">The tartest!</div>
</a>
</div>

JQuery

$(function() {
    "use strict";
    $('#cart-water')
        .find('.tt')
        .hide();

    $('#cart-water').find('.item').on('mouseenter mouseleave', function() {
        $(this).find('.tt').toggle(200);
    });
});

Another Tooltip Example

Back To Top< — >Category< — > Home