위치 툴팁 캐럿 나는 다음과 같은 툴팁이

:위치 툴팁 캐럿 나는 다음과 같은 툴팁이

.tooltip { 
    position: relative; 
    margin-bottom: 0.5em; 
    padding: 10px 10px; 
    border-radius: 5px; 
    bottom: 100%; 
    min-width: 10em; 
    width: 25%; 
    font-size: 12px; 
    line-height: 15px; 
    font-size: 0.75rem; 
    line-height: 0.9375rem; 
}

전체 코드는 여기에 있습니다 :

http://jsbin.com/aqewiv/2/edit

내가에서 툴팁의 캐럿을 배치 문제가 많은 데 상자의 중심. 오른쪽 상자 ('Test Data 2')를 보면 상자의 가운데에 내가 원하는 것을 나타냅니다. 그러나 왼쪽 상자 ('Test data 1')를 보면 캐럿 기호가 아래쪽으로 이동합니다. 상자가 커질 때도 가운데에 캐럿을 배치 할 수있는 방법이 있습니까? 당신이 테스트 데이터 상자 heigth를 알고있는 경우

출처

2013-07-25 newbie

는 툴팁의 높이에 따라 중앙, 그건는 2 일에서 중심 것으로 보인다 이유 div로 작습니다. – dsuess

JavaScript는이 기능을 사용해야합니다. 당신은 잡힌 div의 높이를 얻어야하고, 그것을 사용하여 caret의'top'을 설정합니다. –

나는 모든 답을 볼 수 있습니다. 그러나 나는 당신이 좀 더 역동적 인 것을 원할 것입니다. @Jonny 해냈다. 그러나 jQuery를 사용하여': after' 가상 요소를 대상으로 지정하는 방법을 알아낼 수는 없습니다. –

당신은 추가 할 수 있습니다 "후"는 .test 박스에 DEMO HERE

.test-box:hover:after { 
content: ""; 
display: block; 
height: 1em; 
width: 1em; 
right: -0.6em; 
margin-left: 0; 
margin-top: -0.5em; 
background: #FFF; 
position: absolute; 
top: 50%; 
border-width: 0 2px 2px 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
border-left: 2px solid #D9D9D9; 
border-bottom: 2px solid #D9D9D9; 
z-index: 10000; 
}

출처

2013-07-25 17:15:18 OnengLar

은 삼각형, 동적 (JQuery와) 데르 어쩌면 당신이 너무

top: 50px;

와 잘 될 것입니다 그것을 assiign 수

.tooltip-left::after, .tooltip-right::after { 
margin-top: -0.5em; 
position: absolute; 
top: 50%;

으로 정의된다.

출처

2013-07-25 17:06:42 dsuess

높이를 가져 오려면 자바 스크립트를 사용해야하고, 중심을 찾으려면 2로 나눈 다음 툴팁의 상단을 해당 값으로 설정해야합니다. 이 같은 작업을해야합니다.

$(document).ready(function(){ 
    $(".tooltip").each(function(){ 
     var center = $(this).parent().height()/2; 
     $(this).after(" ").css("top", center); 
    }); 
});

출처

2013-07-25 17:14:38

전체 툴팁을 아래로 이동합니다. –

그냥 CSS로 수행

.tooltip-left:after,.tooltip-right:after { top : 100px !important}

출처

2013-07-25 17:29:04 YashPatel

위치 툴팁 캐럿 나는 다음과 같은 툴팁이

답변

관련 문제