Jquery Tooltip works fine, then stops

Question

I have added a jquery tooltip to a project at work. It's supposed to appear with an image inside on over of an element. Now, this works perfectly fine, but on one of the two pages that this tooltip appears, it'll randomly stop popping up on rollover unless refreshed.

Note that the other page does not exhibit this problem, and the code is the same for both, save the image itself. What I've noted through testing is the first page's tooltip stops working if you move the mouse over it fast enough that the tooltip starts to appear, then doesn't.

My question is: Is this a known bug? Is there a way to fix it? If so, what would it be?

For reference, my code:

function mouseRenewal() {
    $('#pinOver').tooltip({
        content: '<img src="../../Content/Images/renewalnotice.GIF" />'
    });
}

And the trigger element:

<%= Html.Label("Pin")%></div>
<%= Html.TextBox("Pin")%>&nbsp;
<span class="help">
     <a id="pinOver" title="" onclick="sampleRenewalOpen()" onmouseover="mouseRenewal()">What's this?</a>
</span>

Note: The onclick event of the element is for mobile browsers. It's so if you can't hover or if the hover breaks, you can open a popup window with the image in it.

EDIT: After further testing, I've concluded that it is not the speed of the mouseover. Repeated mouseovers in general recieve the issue, not even simply quicky ones. I am now attempting to use delay to try and make it work correctly and consistantly.

Answer 1

You are initializing tooltip with each mouseover. Initialization is needed only once at the start.

$('#pinOver').tooltip({
    content: '<img src="../../Content/Images/renewalnotice.GIF" />'
});

<span class="help">
 <a id="pinOver" title="">  
    What's this?
</a>
</span>

See Demo