Jquery 툴팁의 내용에 의존하지 않는 화살표의 위치를 ​​고정하는 방법은 무엇입니까?

Question

텍스트 상자에 툴팁을 적용하는 동안 제목 속성의 내용에 따라 화살표 위치를 전달할 때 문제가 있다는 것이 유일한 문제입니다. 짧은 제목의 화살표가 잘 들어오고 (텍스트 상자 중간) 긴 제목의 경우 화살표가 텍스트 상자까지 올라갑니다. 여기에 JSFiddle 코드 링크입니다 :

Fiddle Link

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

또한 확인하십시오 (the updated 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; 

    } 

Demo Link