Break word on InfoTooltip

[michellethomas]

Someone on slack mentioned that the text was getting cut off for the expression tooltip. Because it's one long string with no word breaks, the expression text gets cut off. I'm proposing adding wordWrap: 'break-word' to the InfoTooltipWithTrigger so that the text will wrap.

If you don't think this should be the default behavior for all tooltips, I can change it to pass the styles in.

It looks like there's no bootstrap class for break-word. If there's a better way to add specific styles in, let me know.

Before:

After:

[coveralls]

Coverage remained the same at 69.927% when pulling 2b2ca8b on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[joshwalters]

This is great, we are seeing this issue a lot.

[mistercrunch]

I read recently that {{}} in React are typically to be avoided as it forces PureComponent to re-render every time the parent re-renders since the object is regenerated and there's a new objectid.

The solution is to simply declare the const in module scope as in:
const tooltipStyle = { wordWrap: 'break-word' }

[mistercrunch]

[out of scope for this PR] I've been thinking we should grep for {{ and clean that in our whole codebase, it should lead to less rendering. Of course the vdom magic prevents the dom from being updated, but the render and dom diffing can be significant though...

[coveralls]

Coverage remained the same at 69.927% when pulling 462a489c06abe4f6a69b3d6f48324b3fc1b8a313 on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[coveralls]

Coverage remained the same at 69.927% when pulling 462a489c06abe4f6a69b3d6f48324b3fc1b8a313 on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[coveralls]

Coverage remained the same at 69.927% when pulling 462a489c06abe4f6a69b3d6f48324b3fc1b8a313 on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[coveralls]

Coverage remained the same at 69.927% when pulling bd100ff on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[coveralls]

Coverage remained the same at 69.927% when pulling bd100ff on michellethomas:tooltip_wrap_word into 7d934e7 on apache:master.

[michellethomas]

Interesting, thanks for the information. I had heard that defining a function when passing it through as a prop could have performance implications, but didn't know it applied to objects as well.