JQuery tooltip open event not working as expected

I am trying to make my tooltips change position depending on the orientation of the .menu container. For some reason they only change position when the second open event is fired.

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

Is there anyway to make the tooltips change position when the first open event is fired?

It is because when the open event is fired the display position is already calculated... so any changes you do after that will be reflected only in the next display.

The following solution is a hack, the right solution will be is to change the tooltip solution when the orientation is actually changed.

$(".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');
            })
        }
    }
});

Demo: Fiddle