在移动设备上实时更新 JQueryUI 工具提示的内容

Question

我有一个 follow/unfollow 按钮，我正在使用 jQuery UI 工具提示来显示按钮的标题。单击按钮后，我更改按钮的标题并立即更新工具提示（用户无需将鼠标移开并 re-hover 在按钮上），如下所示：

el.title = 'Follow';
$('#follow').tooltip("option", "content", "Follow");
$(this).mouseover();

有没有办法在移动设备上复制这种行为？如果没有，是否有更好的方法来立即更新适用于桌面和移动设备的工具提示内容？

Answer 1

在移动设备上，您可能需要借助触摸事件来实现完全一致。移动设备上的 "click" 实际上是模拟的；它是由同一元素上的 touchstart 和 touchend 合成的。 mouseover/in 和 mouseexit/leave/out 事件在触摸设备中是非启动器。

我会尝试将您在上面包含的代码序列不仅附加到点击事件，还附加到触摸事件。

有关触摸事件的更多详细信息API，您可以参考MDN (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events); Apple has perhaps the longest-standing such document (https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)。后一页还有一些传统鼠标事件如何被触摸设备"inferred"的信息。

Answer 2

我最终将工具提示文本的更改方式更改为

$('#follow').tooltip("option", "content", "Follow");
$("#follow").data("ui-tooltip-title", "Follow");
$(".ui-tooltip-content").html($("#follow").data("ui-tooltip-title"));

这消除了触发鼠标悬停事件的需要，因此首次在移动设备上运行。

在移动设备上实时更新 JQueryUI 工具提示的内容

Update Contents of JQueryUI Tooltip in Realtime on Mobile

jquery

jquery-ui

jquery-ui-tooltip