Tooltip does not disappear after a new page is loaded

Question

I am using twitter boostrap to implement tooltip for my web app (twipsy)

My implementation is as follows:

%li.friend
  %a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"click to see xxxx's muse"}
    %img{src: "<%= avatar_url %>"}

The sequence of steps is as follows: 1) Hover on the avatar I want to click => tooltip appears above avatar (no issue)

2) Click on avatar to load a new page

3) New page is loaded but the tooltip shown in 1) did not disappear and just remain displayed on the newly loaded page.

Is there any additional parameters I need to set to ensure that the tooltip disappears in step 3)?

Answer 1

As tooltip toggles on mouseenter and leave when you click the element and DOM structure is replaced with new page the mouseleave on the avatar is never triggered as the element was removed programmatically while mouse was hovering over it.

To fix that you need to call the .tooltip('hide') method when you click the avatar.