css - 输入组上的引导工具提示（放置=右）

Question

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

链接： 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.fixed select by move red-tooltipup to parents, and move title="Please choose one" data-toggle="tooltip" data-placement="right"up (永远记住元素块)。

<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，但你明白了（以防第一个和第二个链接都坏了）。

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