2014-02-19 1 views
0

Bootstrap과 관련하여 총 newb이지만 어떤 이유로 인해 패널 안의 툴 팁을 얻지 못하고 btn-group 내부에서 작동하지 않습니다.Bootstrap Tool 패널에서 btn-group에 대한 팁

.btn 그룹 또는 .input- 내 요소에 툴팁을 사용하는 경우 여기에 문서 버튼 그룹과 입력 그룹에 대한 http://getbootstrap.com/javascript/#tooltips-examples

회담 ...

"툴팁 특별한 설정이 필요합니다

그룹의 경우, 원하지 않는 부작용 (예 : 요소가 넓어 지거나 툴팁이 트리거 될 때 둥근 모서리가 지워지는)을 피하려면 옵션 컨테이너 : 'body'(아래 설명 됨)를 지정해야합니다.

하지만 그게 무슨 뜻인지는 몰라!

저는 tooltip.js를 포함 시키려고했지만 저에게 도움이되지 않습니다.

도움을 주셔서 감사합니다.

<div class="panel panel-default hidden-xs"> 
         <div class="panel-body"> 
          <div class="col-xs-12 col-sm-9 col-md-9"> 
           <h4> Welcome</h4> 
          </div> 

          <div class="col-sm-3 col-md-3 text-right"> 

           <div class="btn-group"> 
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> 
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> 
           </div> 
          </div> 
         </div> 
        </div> 

답변

1

이것은 원하지 않는 동작을 피하기위한 것입니다. 컨테이너를 지정하지 않으면 툴팁이 잘릴 수도 있고 이상 할 수도 있습니다. 여기에 코드를 사용하는 예입니다

http://www.bootply.com/115182

당신은 단지 당신이 코드의 jQuery를 부분을 포함 할 필요가 당신은 황금해야합니다.

$(document).ready(function() { 
      $('#tooltip1').tooltip(); 
     }); 

나는 또한 data-container과 HTML에 id을 추가했습니다.

<button type="button" id="tooltip1" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>