Tooltip simple does not allow word-wrap: break-word;

[tw15egan]

@mandie12 commented on Fri Jan 26 2018

Tooltip simple does not allow word-wrap: break-word; on Chrome

---

@tw15egan commented on Fri Jan 26 2018

Can you try white-space: pre on the :before element? And make sure you have a space after the period. This should then format correctly.

[feliperyba]

Hey, I'm having the same issue with the Data Table component.
In fact I tried in many others components and the issue is also present in all of then.

[alisonjoseph]

Hi @feliperyba, thanks for commenting! Do you mind making a new issue explaining your issue/use-case in more detail? I believe it is un-related to the tooltip bug. Thanks! 😄

[alisonjoseph]

@tw15egan I don't think there's a simple way to fix this without setting a width on the tooltip which wouldn't work for shorter content. Even if we add white-space: pre that will only work for someone who can specifically format the text with line breaks.

I suppose we could use javascript to calculate character length and set a width / change a class if it's over a certain amount of characters but seems like overkill for the simple tooltip when we have the regular tooltip already?

[tw15egan]

@alisonjoseph I agree, not sure this will work for simple tooltip. I think the recommended course of action would be to use the regular tooltip for situations like this, or override the css and set a width on the end-user side (as we can't, because then it will break for other users).

I'm going to close this as and recommend setting a width , or using the regular tooltip component