jquery pjax + jquery tipsy the tooltip doesn't hide on mouseout after click

Question

When using jquery.tipsy on pjax links, the tooltip doesn't hide on mouseout after the click.

This could mean that after the click, mouseout event is unattached from this element and that's why the problem exists ?

Here's how I load pjax & tipsy()

$(function () {
    $('[data-pjax]').pjax('#offer-table', {timeout: 100000})
})


<script type='text/javascript'>
  $('a.tipsy').tipsy({delayIn: 500});
</script>

jquery-pjax: https://github.com/defunkt/jquery-pjax

jquery tipsy: http://onehackoranother.com/projects/jquery/tipsy/

Edit: The same result if live: true added to the tipsy().

You should always include links to plug-in references/source so people don't have to go searching in order to help you. — Mark Schultheiss, Feb 22 '12 at 13:54
Is this the case for all links on the page? Or just those links which are a child of `#offer-table`? — jessegavin, Feb 22 '12 at 22:53
@jessegavin: Exactly. The problem occurs only for links inside the #offer-table. — Robert, Feb 23 '12 at 09:05

score 0 · Answer 1 · answered Aug 23 '12 at 07:27

I've had similar issues. A page uses pjax for the contents of <div data-pjax-container>. Elements inside the container have tipsies that show on mousehover and hide on mouseout. If I trigger a pjax change and then hover an element while it's changing, the tipsy can never hide because there is no element to mouseout from anymore.

This is what I ended up doing, as CoffeeScript:

PJAX_TIPSY_CLASS = "pjax-tipsy"

$element.tipsy(live: true, className: PJAX_TIPSY_CLASS)

# pjax changes could leave a tipsy up from the old page.
$pjaxContainer = $('[data-pjax-container]')
$pjaxContainer.bind 'pjax:end', ->
  $(".#{PJAX_TIPSY_CLASS}").remove()

Or as JavaScript:

var PJAX_TIPSY_CLASS = "pjax-tipsy";

$element.tipsy({ live: true, className: PJAX_TIPSY_CLASS });

var $pjaxContainer = $('[data-pjax-container]');
$pjaxContainer.bind('pjax:end', function() {
  $("." + PJAX_TIPSY_CLASS).remove();
});

jquery pjax + jquery tipsy the tooltip doesn't hide on mouseout after click

1 Answers1