jQuery UI 对话框位于触发对象上方时会闪烁

Question

我正在尝试使用 jQuery UI 对话框来取代以前的 javascript 工具提示机制。我们的网站多年来一直使用 WZ_tooltips。 WZ_tooltips 由 Walter Zorn 于 2002 年创建。RIP Walter：http://www.walterzorn.de/en/tooltip/tooltip_e.htm

但是，WZ_tooltips 使用的 API 已被弃用，由于它的存在，我们在 Pagespeed Insights 的最佳实践中受到了很大的欢迎。由于我们已经在使用 jQuery UI 对话框，自然的一步是尝试使用它们。

问题出在定位上。 WZ_tooltips 做得非常出色，几乎可以自动定位工具提示，无论带有对话框链接的对象（“热点”）位于何处，也无论设备大小如何。使用 jQuery UI，定位工具提示变得非常具有挑战性。

问题来自以下几种情况的组合：

1. 我们使用onmouseover来触发对话框； onmouseout 将其删除。
2. 我们可以使用定位来使对话框在热点附近或相对于其他位置打开。当设备宽度比较大时，这种方法效果很好。但在小型设备上，固定位置会导致对话框出现在屏幕之外。因此，解决方案是不要显式定位并让对话框使用其默认定位。解决离屏问题。
3. 当热点对象位于屏幕中央时，默认定位会导致对话框在热点上方打开，onmouseout 会关闭对话框，然后 onmouseover 会重新打开它。因此对话框继续“闪烁”。

示例 html：请注意该标签使用 FontAwesome 问号圆圈。

    <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>

这是打开的对话框的 html：

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

我创建了一个视频来展示“闪烁”的结果。但由于我无法上传视频，这里有两个屏幕截图，显示“无对话”和“对话”。因为我有半秒淡入，所以你必须想象对话框出现半秒然后消失，半秒后重新出现，依此类推。

似乎需要的是能够根据热点相对于对话框出现位置的位置进行不同的定位。再次，WZ_tooltips 无缝地处理了这个问题。

Answer 1

我们通过确保通过选项设置弹出窗口位置来解决此问题，以免弹出窗口出现在热点上方。