15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

bootstrapをv3にアップデートしたらtooltipの幅が狭くなってしまう場合の対処法

Posted at

利用している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が親要素に影響されて小さくなっちゃった(>_<)
という人は試してみてください。

15
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?