Difference between revisions of "Tooltip"
Jump to navigation
Jump to search
(→HTML) |
|||
| Line 5: | Line 5: | ||
<div class="item citrus"> | <div class="item citrus"> | ||
<a href="#water-ll"> | <a href="#water-ll"> | ||
<img src=" | <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