动态设置jQuery UI工具提示的位置

所以我有下面的代码。我试图从它们所属的元素中获取带有箭头的工具提示

var topPosition = { my: 'center bottom', at: 'center top-10' };
var bottomPosition = { my: 'center top', at: 'center bottom+10' };
$(document).tooltip
({
    tooltipClass: 'top',
    position: topPosition,
    open: function(e,ui){
        var topOfToolTip = ui.tooltip.offset().top;
        var elem = $(e.originalEvent.target);
        if (elem.offset().top < topOfToolTip) {
            pos = {my: 'center top', at: 'center bottom+10'};
            ui.tooltip.position(pos);
            ui.tooltip.addClass("bottom");              
        }           
    } 
});

因此，在代码中，我检查元素上方是否没有足够的空间放置工具提示，然后我希望它显示在下面。好的，那就行了。但我的问题是，当这种情况发生时，箭头指向了错误的方向。如果我手动更改类和位置以使用底部值，那么它在下面工作，但在我尝试获取工具提示以显示在上面时不起作用

---

因此，问题在于，这一立场似乎没有确定下来。有人能告诉我怎么做吗？

正如我所评论的，利用

位置

选项和

使用

属性可以处理这个问题，只需对CSS做一些更改

工作示例：

HTML

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
  <label for="age">Your age:</label>
  <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>

jQuery

$(document).tooltip({
  position: {
    my: 'center bottom-20',
    at: 'center top',
    using: function(position, feedback) {
      console.log(feedback);
      $(this).css(position);
      $(this).addClass(feedback.vertical);
    }
  }
});

---

您可以看到根据

反馈添加到工具提示中的正确类
顶部
或
底部
。我调整了您的CSS，使箭头在每个场景中都指向正确的方向。
正在处理此问题。我想您最好使用
位置
选项和
使用
属性。我举了这个例子：并应用了您的样式。它仍然落后。。。但这是我的建议：这对我来说很有效，当时我只是做了上下两步。但我现在正在尝试扩展它，这样我就可以做左或右。（如果工具提示显示在屏幕外，则应转到另一侧）。因此，在使用函数中，我检查position.left是否小于0。如果是I$（this）.css（rightPosition）；。但是工具提示不会移动我的位置。有更多的元素可以用来解决这个问题。如果您将对象发送到控制台，您可以执行类似于顶部/底部修复的操作。我可以设置类没有问题，因此箭头设置正确。但我的问题是工具提示位置本身是错误的。在using函数中，它的值为-55，因此有点脱离屏幕。如果是这样的话，我想把它放在元素的右边。我想之前我也没有设置位置，jQuery本身，或者浏览器可能会处理这个问题。我只是不正确地设置了类，当我制作jFiddle时，我可能已经找到了解决方案。当我确信它实际上提到可以使用反馈为我排序时，我会更新。我使用反馈目标来确定工具提示的位置。为帮助干杯。
.ui-tooltip-content {
  position: relative;
  padding: 1em;
}

.ui-tooltip-content::after {
  content: '';
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
}

.top .ui-tooltip-content::after {
  top: -10px;
  bottom: auto;
  border-color: #666 transparent;
  border-width: 0 10px 10px;
}

.bottom .ui-tooltip-content::after {
  bottom: -10px;
  border-color: #666 transparent;
  border-width: 10px 10px 0;
}

$(document).tooltip({
  position: {
    my: 'center bottom-20',
    at: 'center top',
    using: function(position, feedback) {
      console.log(feedback);
      $(this).css(position);
      $(this).addClass(feedback.vertical);
    }
  }
});