Bootstrap工具提示在一個面板然後在btn組

我是一個總的新手當涉及到Bootstrap，但由於某種原因，我不能得到以下工具提示是在一個面板內然後在Btn組內工作。Bootstrap工具提示在一個面板然後在btn組

這裏的文檔 http://getbootstrap.com/javascript/#tooltips-examples

會談約...

「工具提示按鈕組和輸入組需要特別設置當在.btn基團或.input-內的元素使用工具提示組，您必須指定選項容器：'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>

來源

2014-02-19 Bill

這只是爲了避免不必要的行爲。如果你沒有指定容器，那麼工具提示可能會被截斷或其他有奇怪的行爲。下面是使用你的代碼的例子：

http://www.bootply.com/115182

你一定要確保你有代碼的jQuery的一部分，你應該是金色的。

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

我還添加了data-container和id到您的HTML。

<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>

來源

2014-02-19 15:49:54 Thunda

Bootstrap工具提示在一個面板然後在btn組

回答

相關問題