利用しているTwitter Bootstrapをv2系からv3系に移行したら、tooltipの幅が狭くなってしもた。
原因
- v2系
- デフォルトがbody閉じ直前にtooltipの要素を追加していた
- v3系(JSからの呼び出しの場合)
- デフォルトだとtooltipを表示する要素の直後にtootipのDOMが追加される
- このため、tootipを表示する要素の親次第でwidthが制限されてしまう
解決方法
今までが以下のようならば、
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
data-containerにbodyを指定すればOK。
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">Hover over me</a>
tooltipが親要素に影響されて小さくなっちゃった(>_<)
という人は試してみてください。