tooltip flickers(or)jumps in jquery tipsy.js

Question

i'm using tipsy.js for my applications, when i hover the content it shows tooltips but its flickers or jumps often in FF and IE where as in Chrome the it not happening plz some one help me to figure out this issue .

<div id="div142" class="CheckBox3Img" runat="server" title=" Store xxx try to give more " visible="false" style="height: 19px; margin-top: 8px; cursor: pointer;">
                            <a id="lnkStore" runat="server" style="float: left; height: 18px; width: 24px;" title=" Website Store"
                                class="imgwebDev">
                                <img src="../../App_Themes/Main/_images/DollarImg.jpg" />
                            </a>
</div>

JavaScript:

$(.CheckBox3Img).tipsy({gravity:s});

Note: this works in normal maximized window since i'm supporting other devices ipad and the width of the window is small at that time when tool tips width has not sufficient space to show the full text its started to blink or jumps. Resize the window to small and make sure the tooltip element at the corner of the window.

Normally while re sizing window the width of the tooltip not increased. — Chandru velan, Mar 22 '12 at 13:43

score 0 · Answer 1 · answered Jun 27 '18 at 08:50

If your issue is that tipsy constantly flickers when the pointer is on the edge of the element on which you've set the tooltip, then add this css:

.tipsyS {
  pointer-events: none;
}

It will get you out of the hide-show loop, its a hack but it hasn't broken anything for me so far.

score 0 · Answer 2 · answered Jan 28 '20 at 15:10

0

I fixed my issue by adding this style to the tooltip class :

   .tooltip {
        pointer-events: none;
    }

answered Jan 28 '20 at 15:10

d.popov

4,175
1
36
47

Chandru velan · Accepted Answer · 2012-03-23T05:34:51.657

thanks guys i solved the problem by adding &nbsp where ever i need a space that is it.

<div id="div142" class="CheckBox3Img" runat="server" title="Store&nbsp;xxx&nbsp;try&nbsp;to give&nbsp;more&nbsp; " visible="false" style="height: 19px; margin-top: 8px; cursor: pointer;">
                            <a id="lnkStore" runat="server" style="float: left; height: 18px; width: 24px;" title=" Website Store"
                                class="imgwebDev">
                                <img src="../../App_Themes/Main/_images/DollarImg.jpg" />
                            </a>
</div>

tooltip flickers(or)jumps in jquery tipsy.js

3 Answers3