javascript - 如何固定箭头的位置不取决于 Jquery Tooltip 中的内容？

Question

在文本框上应用工具提示时，唯一的问题是我在根据标题属性中的内容处理箭头位置时遇到问题。对于短标题箭头很好（文本框中间），但对于长标题，箭头向上到文本框。这是JSFiddle 代码链接：

小提琴链接

 $(function() {
$( document ).tooltip({
  position: {
    my: "left center",
    at: "right+10 center",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
       .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo( this );
    }
  }
});

});

Answer 1

您不需要将额外的类添加arrow到工具提示中。你可以在:before类上使用伪类.ui-tooltip。

.ui-tooltip {
    padding: 10px 12px;
    color: Black;
    font: 8pt "Helvetica Neue", Sans-Serif;   
    max-width: 150px;
    background: white;
    border: 1px solid #999;
    position: absolute;
} 
.ui-tooltip:before {
    content: "";
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #999; 
    position: absolute;
    top: 50%;
    margin-top: -10px;
    margin-left: -22px;
}

还要检查这个更新的 Fiddle。

Answer 2

你可以设置

top:50%

或者使用这个

只有这个代码..这正是你想要的..:)

.arrow {
        height: 0;
        width: 0;    
        overflow: hidden;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: -20px;
        border:10px solid #999;
        border-top-color:transparent;
        border-left-color:transparent;
        border-bottom-color:transparent;

  }

演示链接