Bootstrap 输入组上的工具提示（放置=右）

Question

我希望所有工具提示都显示在同一位置。带有输入组的那个稍微不对齐。此外，select（select选择器）不会显示工具提示。请帮忙。谢谢

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

像这样，您需要将工具提示移至父容器：

1.fixed 使用 btn 组输入。

2.fixed select 向上移动 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。检查这个 link:

http://www.bootply.com/EhSNBH1elh

2。这里有相同的代码，incase 1st link broken:

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

3。样式在 Whosebug 上看起来不正确，但你明白了（以防第一和第二 link 全部损坏）。

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

Answer 2

请检查这个link我编辑你的代码

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

Bootstrap 输入组上的工具提示（放置=右）

Bootstrap tooltip (placement=right) on input-group

css

twitter-bootstrap

twitter-bootstrap-tooltip

bootstrap-selectpicker

1。检查这个 link:

2。这里有相同的代码，incase 1st link broken:

3。样式在 Whosebug 上看起来不正确，但你明白了（以防第一和第二 link 全部损坏）。