.btn-groupにtooltipを使うとデザインがズレる
環境
- Mac OS X 10.10.2
- Google Chrome 41.0.2272.101 (64-bit)
- Bootstrap 3.3.4
.btn-groupにtooltipを使うとデザインがズレる
.btn-group
内のbutton
にtooltip
を使用すると、
tooltip
が発動した時に1px程度ズレが生じてしまいます。
<div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip"> Left </button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
何故ズレが生じているのか?
Bootstrapのソースコードを見てみると、隣接している.btn
にmargin-left: -1px;
が指定されているようです。
.btn-group { .btn + .btn, .btn + .btn-group, .btn-group + .btn, .btn-group + .btn-group { margin-left: -1px; } }
しかし、tooltip
を使用するとtooltip
の対象となっている.btn
の後にDOMが追加されてしまい、.btn
同士が隣接している状態ではなくなってしまいます。
そうすると、上記cssが適応されないのでレイアウトがズレてしまっているようです。
ズレが生じないようにする
対処法としてはdata-container
をbody
等に設定してあげればOKです。
<div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-container="body" title="Tooltip"> Left </button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
参考
Bootstrapの公式サイトにもdata-container
を指定するよう載っていますね。
When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).