jQuery UI Dialog flashes when positioned over triggering object

Question

I am trying to use jQuery UI Dialogs to replace the previous javascript tooltip mechanism. Our website has been using WZ_tooltips for many years. WZ_tooltips was created by Walter Zorn in 2002. RIP Walter: http://www.walterzorn.de/en/tooltip/tooltip_e.htm

However, WZ_tooltips uses an API that is deprecated and we get a big hit in Pagespeed Insights for best practices due to its presence. Since we are already using jQuery UI dialogs, a natural step would be to try to use them instead.

The problem is with the positioning. WZ_tooltips did a fantastics job of positioning the tooltips mostly automatically, no matter where the object with the link to the dialog (the "hotspot") was located and no matter what the device size. With jQuery UI, having to position the tooltip is turning out to be challenging.

The problem comes from the following combination of circumstances:

1. We use onmouseover to trigger the dialog; onmouseout to remove it.
2. We can using positioning to cause the dialog to open adjacent to the hotspot, or relative to other locations. When the device width is relatively large, this works fine. But on a small device, the fixed positioning causes the dialog of appear off screen. So a solution to that is not to explicityly position and let the dialog use its default positioning. Solves the off-screen issue.
3. When the hotspot object is in the center of the screen, the default positioning causes the dialog to open over the hotspot, and the onmouseout closes the dialog, and then the onmouseover re-opens it. Thus the dialog continues to "flash".

Example html: please note the tag is using a FontAwesome question-mark-in-a-cirle.

    <a class="tt" onmouseover="$('#tt-pw-advice').dialog('open')" onmouseout="$('#tt-pw-advice').dialog('close')">
        <i class="tt-qm fa-regular fa-circle-question"></i>
    </a>

Here is the html of the dialog that is opened:

<div class="rh-tt" id="tt-pw-advice" title="Password Strength">
     ... text of the tooltip ...
</div>

I created a video to show the "flashing" result. But since I cannot upload the video, instead here are two screen shots showing "no dialog" and "dialog". Because I have a half-second fade in, you have to imagine the dialog appears for a half second and then disappears and a half second later reappears, and so on.

What seems to be needed is the ability to position differently depending upon where the hotspot is relative to the position where the dialog will appear. Again, WZ_tooltips handled that seamlessly.

Answer 1

We solved this issue by making sure that the popup location was set via options so as not to have the popup appear over the hot spot.