I have an each method I'm leveraging to launch a tooltip relevant to the <td>
it exists within. Everything works great in IE, Chrome, Safari, but Firefox is completely missing the each method, and launching only the last tooltip in the DOM.
What gives?
http://jsfiddle.net/yus5b/
HTML:
<div class="stage">
<div class="dealFinder">
<h2 class="title">Deal Finder in Your Area</h2>
<table cellpadding="5">
<tr>
<td class="text">
<p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p>
<a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a>
<div class="tooltip">
<div class="inner">
<b>2012 Land Rover Range Rover Evoque</b>
<span>Your Price $19,330</span>
<p>The National Average is <b>$21,500</b></p>
</div>
</div>
</td>
<td class="pic">
<a href="#"><img src="http://placehold.it/113x75" /></a>
</td>
</tr>
<tr>
<td class="text">
<p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p>
<a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a>
<div class="tooltip">
<div class="inner">
<b>2012 Land Rover Range Rover Evoque</b>
<span><small>Your Price</small> $19,330</span>
<p>The National Average is <b>$21,500</b></p>
</div>
</div>
</td>
<td class="pic">
<a href="#"><img src="http://placehold.it/113x75" /></a>
</td>
</tr>
</table>
</div><!-- .dealFinder -->
</div>
jQuery:
$(document).ready(function() {
// Tooltip
$('.tooltip').hide();
$('.text').each(function(e) {
var self = this;
var tooltip = $(self).find('.tooltip');
var youSave = $(self).find('.youSave');
$(youSave).mouseenter(function(e) {
$(self).find(tooltip).fadeIn("slow");
});
$(youSave).mouseleave(function(e) {
$(self).find(tooltip).fadeOut("fast");
});
});
});
There really should almost never be a need for an each function to iterate over elements just to bind them to event handlers:
$(document).ready(function() {
$('.tooltip').hide();
$('.youSave', '.text').on('mouseenter mouseleave', function() {
$(this).next('.tooltip').fadeToggle('slow');
});
});
FIDDLE
The rest is just placement issues from placing the tooltip on top of the button, and should be fixable with a little CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With