2

부트 스트랩의 tooltip 플러그인을 사용하고 있으며 data-placement="auto bottom"이 작동하는 데 문제가 있습니다. data-placement="bottom"을 사용하면 의도 한대로 작동합니다.툴팁 자동 배치가 올바르게 작동하지 않는 이유는 무엇입니까?

<button class="tooltip-icon btn-icon tooltip-trigger" title="Enter Address" data-placement="auto bottom"> 
    <svg class="icon help"> 
    <use xlink:href="#help"/> 
    </svg> 
</button> 

는 위의 툴팁의 위치가 top되도록 : 여기 내 요소는 모습입니다.

다음
Tooltip.DEFAULTS = { 
    animation: true, 
    placement: 'auto bottom', 
    selector: false, 
    template: '<div class="bootstrap-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>', 
    trigger: 'hover focus', 
    title: '', 
    delay: 0, 
    html: false, 
    container: false, 
    viewport: { 
     selector: 'body', 
     padding: 0 
    } 
    } 

것은 내가 방법을 초기화하고 있습니다 : 의도 한대로 $('.tooltip-trigger').tooltip();

왜 자동 배치가 작동하지 않습니다 나는 또한 JS의 기본 배치 값을 변경?

+1

'auto bottom'은 부트 스트랩 v3.2.0에서는 작동하지만 최신 버전에서는 작동하지 않는 것 같습니다 : [https://github.com/twbs/bootstrap/issues/13934](https://github.com/twbs)/bootstrap/issues/13934) – Chitrang

+0

@Chitrang 찾아 주셔서 감사합니다. v3.2.0 (https://github.com/twbs/bootstrap/blob/dca8afa333f47dcdaf44162d66a0ac18f9ea126b/js/tooltip.js)으로 시도했지만 올바르게 작동하지 않습니다. –

+0

음 ... 코드에 jsFiddle을 공유 할 수 있습니까? 위의 링크에서, 그들은 [jsFiddle] (http://jsfiddle.net/77ak3/1/) 어디에서 잘 작동합니다. – Chitrang

답변

0

"자동"을 지정하면 동적으로 툴팁의 방향을 재 지정합니다. 예를 들어 게재 위치가 '자동 하단'인 경우 가능하면 툴팁이 하단에 표시되고 그렇지 않으면 상단이 표시됩니다.

+0

사실이 아닙니다. 문서에서 인용 : \t "도구 설명을 배치하는 방법 - 위쪽 | 아래쪽 | 왼쪽 | 오른쪽 | 자동""자동"을 지정하면 동적으로 도구 설명의 방향이 바뀝니다. 예를 들어, 배치가 "자동 왼쪽" 가능한 경우 도구 설명이 왼쪽에 표시되고 그렇지 않으면 오른쪽으로 표시됩니다. " 출처 : http://getbootstrap.com/javascript/#tooltips –

+0

당신 말이 맞습니다. 나를 고쳐 줘서 고마워. 잘못 대답하면 죄송합니다. –

+0

설명서에 따르면 "auto"가 지정되면 동적으로 툴팁의 방향을 재 지정합니다. 예를 들어 게재 위치가 '자동 왼쪽'인 경우 가능하면 툴팁이 왼쪽에 표시되고, 그렇지 않으면 오른쪽으로 표시됩니다. –

관련 문제