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...") |
(→HTML) |
||
| (One intermediate revision by the same user not shown) | |||
| 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> | ||
| 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]] | ||
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