Difference between revisions of "Tooltip"
Jump to navigation
Jump to search
(Created page with "= Display a tooltip when mouseenter= ==HTML== <pre> <div class="item citrus"> <a href="#water-ll"> <img src="../../hplussport.com/wp-content/uploads/2015/12/mineral-water-le...") |
|||
| Line 26: | Line 26: | ||
}); | }); | ||
</pre> | </pre> | ||
== Another Tooltip Example== | |||
[[#top|Back To Top]]< — >[[JQuery|Category]]< — >[[Main_Page| Home]] | [[#top|Back To Top]]< — >[[JQuery|Category]]< — >[[Main_Page| Home]] | ||
Revision as of 22:11, 2 January 2017
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