Tooltip

From rbachwiki
Revision as of 14:07, 3 January 2017 by Bacchas (talk | contribs) (→‎HTML)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Display a tooltip when mouseenter

HTML

<div class="item citrus">
 <a href="#water-ll">
<img src="lime_400x600.jpg"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