Question

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

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：

.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 {
    bottom: -10px;
    border-color: #666 transparent;
    border-width: 10px 10px 0;    
}

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

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

所以问题是这个位置似乎没有设定。那么有人能告诉我我是怎么做到的吗？

Answer 1

正如我评论的那样，使用position选项和using属性可以通过对CSS进行一些更改来处理此问题。

工作示例：https://jsfiddle.net/vmmsb9vx/1/

<强> 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>

<强> CSS

.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;
}

<强>的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);
    }
  }
});

根据top，您可以在工具提示中看到正确的课程bottom或feedback。我调整了你的CSS，所以箭头在每个场景中指向正确的方式。

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

1 个答案: