如何不依賴於Jquery Tooltip中的內容來固定箭頭的位置？

Question

在文本框上應用工具提示時，唯一的問題是我在根據title屬性中的內容處理箭頭的位置時遇到問題。 對於簡短標題，箭頭會很好（文本框的中間），但是對於較長標題，箭頭會向上轉到文本框。 這是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 。 您可以在.ui-tooltip類上使用:before偽類。

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

還要檢查此更新的小提琴 。

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;

  }

演示鏈接