輸入組上的Bootstrap工具提示（placement = right）

Question

我希望所有工具提示都顯示在同一位置。 具有輸入組的那個稍微不對齊。 此外，對於選擇（選擇器），也不會顯示工具提示。 請幫忙。 謝謝。

鏈接： http ： //www.bootply.com/pb5yAV7aIS

 $(function() { $('[data-toggle="tooltip"]').tooltip(); $('.selectpicker').selectpicker(); }); 

 .mb5 { margin-bottom: 5px; } .tooltip-inner { max-width: 500px; white-space: nowrap; } .red-tooltip + .tooltip > .tooltip-inner { background-color: #f00; } .red-tooltip + .tooltip > .tooltip-arrow { border-right-color: #f00; } 

 <div class="container"> <div class="form-horizontal"> <div class="col-sm-3"> <div class="form-group mb5"> <input type="text" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="This is input"> </div> <div class="form-group mb5"> <input type="text" class="form-control input-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is another input"> </div> <div class="form-group mb5"> <div class="input-group input-group-sm"> <input type="text" class="form-control input red-tooltip" data-toggle="tooltip" data-placement="right" title="This is input with group"> <span class="input-group-btn"> <button class="btn btn-success" type="button" tabindex="-1"><i class="fa fa-refresh"></i></button> </span> </div> </div> <div class="form-group mb5"> <select class="selectpicker show-tick" title="Please choose one" data-width="100%" data-toggle="tooltip" data-placement="right"> <option selected="" value="A">Option A</option> <option value="B">Option B</option> <option value="C">Option C</option> </select> </div> </div> <div class="col-sm-9"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> </div> </div> 

Answer 1

請檢查此鏈接，我編輯您的代碼

鏈接 ： -http : //www.bootply.com/u77OpcF2Ua

 <div class="form-group mb5" data-toggle="tooltip" data-placement="right" title="This is another input">
    <select class="selectpicker show-tick" title="Please choose one" data-width="100%">
      <option selected="" value="A">Option A</option>
      <option value="B">Option B</option>
      <option value="C">Option C</option>
    </select>
  </div>

Answer 2

像這樣，您需要將工具提示移至父容器：

1.使用btn組固定輸入。

2.通過將red-tooltip上移至父級，並title="Please choose one" data-toggle="tooltip" data-placement="right"來固定選擇（始終牢記元素塊）。

<div class="form-group mb5 red-tooltip" title="Please choose one" data-toggle="tooltip" data-placement="right">
  <select class="selectpicker show-tick" data-width="100%">
    <option selected="" value="A">Option A</option>
    <option value="B">Option B</option>
    <option value="C">Option C</option>
  </select>
</div>

1.檢查此鏈接：

http://www.bootply.com/EhSNBH1elh

2.此處的代碼相同，以防第一個鏈接斷開：

http://www.codeply.com/go/bp/eCXWCy93sh

3.樣式在stackoverflow上看起來不正確，但是您有這個主意（以防第1和第2鏈接全部斷開）。

 $(function() { $('[data-toggle="tooltip"]').tooltip(); $('.selectpicker').selectpicker(); }); 

 .mb5 { margin-bottom: 5px; } .tooltip-inner { max-width: 500px; white-space: nowrap; } .red-tooltip + .tooltip > .tooltip-inner { background-color: #f00; } .red-tooltip + .tooltip > .tooltip-arrow { border-right-color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/i18n/defaults-*.min.js"></script> <div class="container"> <div class="form-horizontal"> <div class="col-sm-3"> <div class="form-group mb5"> <input type="text" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="This is input"> </div> <div class="form-group mb5"> <input type="text" class="form-control input-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is another input"> </div> <div class="form-group mb5"> <div class="input-group input-group-sm red-tooltip" data-toggle="tooltip" data-placement="right" title="This is input with group"> <input type="text" class="form-control input"> <span class="input-group-btn"> <button class="btn btn-success" type="button" tabindex="-1"><i class="fa fa-refresh"></i></button> </span> </div> </div> <div class="form-group mb5 red-tooltip" title="Please choose one" data-toggle="tooltip" data-placement="right"> <select class="selectpicker show-tick" data-width="100%"> <option selected="" value="A">Option A</option> <option value="B">Option B</option> <option value="C">Option C</option> </select> </div> </div> <div class="col-sm-9"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> </div> </div>