Tooltip/popover doesn't work correctly when text is long and without space

[Hiieu]

http://jsfiddle.net/19jaoah4/

It goes outside the popup.

[twbs-lmvtfy]

Hi @Hiieu!

You appear to have posted a live example (http://fiddle.jshell.net/p8d23y74/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 15, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.0.0
• line 23, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.0.0

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[kkirsche]

@Hiieu Please update to the latest version of Bootstrap. and let us know if the error persists. We do not do support for old versions of Bootstrap.

[aelharrak]

Hello,

This is not a bootstrap issue it's related to the html :)

[jared-christensen]

Here is example of the fix I am proposing. https://jsfiddle.net/frpeqfmL/

[twbs-lmvtfy]

Hi @jared-christensen!

You appear to have posted a live example (https://fiddle.jshell.net/frpeqfmL/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 15, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.0.0
• line 23, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.0.0

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[cvrebert]

Refs #14162

[cvrebert]

Still broken in v4: http://jsfiddle.net/z4fck0o2/3/

[fat]

i'm going to tag this as a css issue.

You css nerds just need to use word-break or something 👍 (added to .tooltip)

[cvrebert]

CSS possibilities:

• word-break
• word-wrap
• Consider using one of the above along with hyphens

Non-CSS tricks:

• ­
• zero-width space
• <wbr>

[cvrebert]

@mdo Thoughts on using word-break or similar?

[mdo]

I'm good with word-wrap: break-word;, but we've got that reset-text mixin in there. Do we remove that property from that mixin, start passing parameters, or dupe the property?

[cvrebert]

I vote for dropping it from the mixin like we did with font-size.
See #18927.

[cvrebert]

Fixed in v4 via #18927.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team