输入组的引导工具提示(placement=right)

Question

我希望所有的工具提示显示在同一位置。有输入组的那个稍微偏离了对齐。此外，工具提示没有显示为select (选择器)。请帮帮忙。谢谢。

​

链接：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

类似于此，您需要将工具提示移动到父容器：

1. btn组固定输入。

2.通过将red-tooltip向上移动到父级来固定select，并将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.风格不对堆叠溢出，但你有这个想法(万一第一和第二链接都坏了)。

​

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

请检查我编辑您的代码的链接。

链接:-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>