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"
      });
    }
  }
});

当第一个tooltips事件被触发时，是否有open更改位置？

Answer 1

这是因为当触发打开事件时，已经计算了显示位置...因此，您之后所做的任何更改都将仅在下一个显示中反映出来。

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

$(".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工具提示打开事件无法按预期工作

1 个答案: