输入组

Question

我希望所有工具提示都显示在同一位置。输入组的那个稍微不对齐。此外，工具提示不会出现在select（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

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

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>

Answer 2

类似这样的东西，你需要将工具提示移动到父容器：

1.使用btn group固定输入。

2.fixed select by move 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个链接全部坏了）。

＆＃13;

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;