I'm using Zurb Foundation tooltips (http://foundation.zurb.com/docs/components/tooltips.html). I'd like to customize their behavior slightly. They make use of a mouseover event listener on the source element to create the tooltip (on the first call) and then fade it in. What I'm attempting to do is to have jQuery select a subset of the tooltip sources on the page, remove just their mouseover listeners, and bind new ones that will let the tooltip stay there for a second before disappearing after the mouse has been moved away.
Here's the tricky part. Zurb binds its listener as such:
$('body.off-canvas').on('mouseenter', '.has-tooltip', ...);
The following will successfully remove this listener, as expected:
$('body.off-canvas').off('mouseenter', '.has-tooltip');
But I only want to remove the listener for some of those elements, like this:
$('body.off-canvas').off('mouseenter', '.has-tooltip.my-custom-class');
It turns out jQuery will not recognize this as "subtractive" of the greater set of .has-tooltip elements, instead essentially saying, "There is no event listener matching this exact selector, therefore I will do nothing." Does anyone have a good workaround? I found some that will work if you're creating the original listener yourself, but that isn't the case here.
One way to achieve this would be to first identify the elements that you want to remove the listener from and store them in a variable. Then, you can use jQuery's off() method to remove the listener for those specific elements. Here's an example:
// Identify the elements you want to remove the listener fromvar elementsToRemove = $('.has-tooltip.my-custom-class'); // Remove the listener for those elements elementsToRemove.off('mouseenter');Another way is to keep track of the event handlers which are bound to the element, then unbind them specifically.
var elems = $('body.off-canvas').find('.has-tooltip.my-custom-class'); var handlers = $._data(elems[0], 'events').mouseenter; for (var i = 0; i < handlers.length; i++) { elems.off('mouseenter', handlers[i].handler); }This way you can remove the specific event handlers which are bound to the elements you want to remove.