반응 형 유틸리티를 사용하여 bootstrap3 툴팁을 사용하려고 시도했습니다.

Question

휴대 전화와 태블릿에서 볼 수있는 두 가지 요소와 데스크톱/etc에 표시되는 두 가지 요소가 있습니다. 이 두 가지 항목에는 도구 설명이 있습니다. 항상 표시하고 싶습니다. (호버를 사용하지 마십시오.)

내가 겪고있는 문제는 응답 요소 인 div 또는 이 경우 버튼)가 숨겨져 있습니다.

HTML :

<div class="container"> 
    <div class="row col-md-12"> 
     <button type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button> 
     <button type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button> 
    </div> 
</div> 

JS는 :

가능한 http://jsbin.com/UFoRIYex/508/edit가 할 수있는 :

var opts = {"container": "body", "trigger": "manual", "html": true}; 
$('.tooltip-btn').tooltip(opts).tooltip("show"); 

나는 예 JSBin이?

Answer 1

이 문제는 버튼이 전혀 보이지 않더라도 툴팁을 적용하는 것으로 인해 발생합니다. 그 주위를 이동하려면 다음과 같이

<button id="small" type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button> 
<button id="medium" type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button> 

가 ... 다음 JS에서 가시성 확인 ... 먼저 buttons에 id을 제공 할 것이다 : 나는 업데이트

if ($('#small').is(':visible')) 
    $('#small').tooltip(opts).tooltip("show"); 
if ($('#medium').is(':visible')) 
    $('#medium').tooltip(opts).tooltip("show"); 

당신의 여기에 붙여 넣기 : http://jsbin.com/UFoRIYex/509/edit