트위터 부트 스트랩 툴팁의 인스턴스 하나만 허용

트위터 부트 스트랩의 툴팁을 한 인스턴스 만 표시하도록 제한 할 수 있습니까? 예 :트위터 부트 스트랩 툴팁의 인스턴스 하나만 허용

<div class="d1" title="d1"> 
    <div class="d2" title="d2"> 
     <div class="d3" title="d3"/> 
    </div> 
</div> 

$('.d1').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}); 
$('.d2').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}); 
$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});

문제는 사업부의 D3에 마우스를 통해 모든 툴팁이 표시된다는 것입니다. 다른 툴팁이 나타나지 않도록하는 방법이 있습니까?

출처

2013-07-31 Janusz Krawiec

DOM을 다른 div에 버블 링하지 않도록 쇼 이벤트를 중단하고 싶습니다. 다음과 같이 표시되는지 확인하십시오.

$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}).on('show', function(e) { 
    e.stopPropagation(); 
});

출처

2013-07-31 23:36:34 Anchor

당신은 CSTE 연구진을 찾으시는 ('show.bs.tooltip')? –

'show'또는 'show.bs.tooltip'? 두 가지 상황이 있습니다 : 1. 마우스 이동이 빠르면 도구 설명이 아닌 d3 (및 정지) 위에 마우스를 놓았을 때 (지연) 볼 수 있지만 잠시 후 그들 중 하나가 차례로 나타납니다. 2. 마우스 움직임이 매우 느립니다. 마우스가 d1 이상이면 첫 번째 툴팁이 표시되고 d1 -> d2에서 마우스가 이동하면 지연 후 다음 툴팁이 표시되지만 첫 번째 툴팁은 사라지지 않습니다. 그런 다음 d3 위로 이동하면 세 번째 툴팁이 표시되지만 다른 두 개는 숨겨지지 않습니다. 두 경우 모두 d3에 대한 툴팁 만 표시되어야합니다. –

가능한 해결 방법으로 피들을 만들었습니다. 새로운 "lone-tooltip"을 정의함으로써 사용자는 다른 모든 툴팁을 숨김으로써 자식 요소의 툴팁을 독자적으로 보여줄 수 있습니다.

이 부트 스트랩의 "shown.bs.tooltip"을 사용하여 작동

, 그것은

$('[data-toggle="tooltip"]').tooltip({ 
    container:'body', 
}) 
$('[data-toggle="lone-tooltip"]').tooltip({ 
    container:'body' 
}) 

$('[data-toggle="lone-tooltip"]').on('shown.bs.tooltip',function(e){ 
    $('[data-toggle="tooltip"]').not(this).tooltip('hide'); 
});

데모 ... "show.bs.tooltip"작동하지 않았다 https://jsfiddle.net/6jkd0cto/3/

출처

2015-04-29 17:33:27

트위터 부트 스트랩 툴팁의 인스턴스 하나만 허용

답변

관련 문제