Bootstrap tooltip (placement=right) on input-group - css

Question

I want all tooltips to show at the same position. The one with the input group is slightly out of align. Also the tooltip does not appear for select (selectpicker). Please help. Thanks.
Link: 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

please check this link i edit your code
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

something like this, you need move the tooltip to parent container:
1.fixed input with btn group.
2.fixed select by move red-tooltip up to parents, and move title="Please choose one" data-toggle="tooltip" data-placement="right" up (always keep in mind about element block).
<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. check this link:
http://www.bootply.com/EhSNBH1elh
2. same code here, incase 1st link broken:
http://www.codeply.com/go/bp/eCXWCy93sh
3. style not looking right at stackoverflow but you got the idea (in case 1st and 2nd link all broken).
$(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>