Difference between revisions of "Tooltip"

From rbachwiki
Jump to navigation Jump to search
 
Line 5: Line 5:
<div class="item citrus">
<div class="item citrus">
  <a href="#water-ll">
  <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">
<img src="lime_400x600.jpg"alt="mineral-water-lemon-lime_400x600">
<h3>Lemon-Lime</h3>
<h3>Lemon-Lime</h3>
  <p> $3.50/bottle</p>
  <p> $3.50/bottle</p>

Latest revision as of 14:07, 3 January 2017

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