JQuery 工具提示打开事件未按预期工作

Question

我正在尝试让我的 tooltips 根据 .menu 容器的方向改变位置。出于某种原因，它们仅在触发第二个 open 事件时才改变位置。

$(".menu button").tooltip({
  position: {
    my: "left center",
    at: "right+10  center"
  },
  open: function () {
    if ($(".menu").hasClass("vertical")) {
      $(this).tooltip("option", "position", {
        my: "left center",
        at: "right+10  center"
      });
    } else {
      $(this).tooltip("option", "position", {
        my: "center bottom",
        at: "center top-10"
      });
    }
  }
});

当第一个 open 事件触发时，是否可以让 tooltips 改变位置？

Answer 1

这是因为当 open 事件触发时，显示位置已经被计算...所以您之后所做的任何更改只会反映在下一个显示中。

以下解决方案是 hack，正确的解决方案是在实际更改方向时更改工具提示解决方案。

$(".menu button").tooltip({
    position: {
        my: "left center",
        at: "right+10  center"
    },
    open: function () {
        var $this = $(this),
            pos = $this.data('position');
        if ($(".menu").hasClass("vertical") && pos != 'vertical') {
            setTimeout(function () {
                $this.tooltip("option", "position", {
                    my: "left center",
                    at: "right+10  center"
                }).data('position', 'vertical').tooltip('close').tooltip('open');
            })
        } else if (!$(".menu").hasClass("vertical") && pos != 'horizontal') {
            setTimeout(function () {
                $this.tooltip("option", "position", {
                    my: "center bottom",
                    at: "center top-10"
                }).data('position', 'horizontal').tooltip('close').tooltip('open');
            })
        }
    }
});

演示：Fiddle

JQuery 工具提示打开事件未按预期工作

JQuery tooltip open event not working as expected

jquery

events

tooltip

jquery-tooltip

jquery-ui-tooltip