search

google / google-visualization-issues

288 stars 35 forks source link

HTML tooltips incorrectly wrap text. #2139

Open FiftyNine opened 8 years ago

FiftyNine commented 8 years ago

I noticed that simply enabling HTML tooltips in Google charts cause tooltips' text to wrap on the next line, when the same does not happen with plain text tooltips, even if their content is the same. Here's a screenshot http://i.imgur.com/8X6MpvK.png You can also reproduce this bug by going to this documentation page https://developers.google.com/chart/interactive/docs/customizing_tooltip_content and comparing tooltips on the second and third charts. Third chart uses HTML tooltips and they wrap for me.] I found a workaround for this bug though. Adding a whitespace and a
tag at the end of the line fixed problem. Like this: "This is a text tooltip
". I tested this on Google Chrome 47.0.2526.106 m and Microsoft Edge 25.10586.0.0

nbering commented 8 years ago

Interesting. I never really noticed this before, but it consistently breaks the line on the last word. I always thought it was just wrapping based on some arbitrary width.

dlaliberte commented 8 years ago

Thanks for pointing this last-word-wrapping problem. It is probably due to a change of our text measuring function, or the padding of the tooltip box. We'll look into it.

On Sun, Jan 10, 2016 at 8:20 PM, Nicholas Bering notifications@github.com wrote:

Interesting. I never really noticed this before, but it consistently breaks the line on the last word. I always thought it was just wrapping based on some arbitrary width.

— Reply to this email directly or view it on GitHub https://github.com/google/google-visualization-issues/issues/2139#issuecomment-170412657 .

Daniel LaLiberte https://plus.google.com/100631381223468223275?prsrc=2 dlaliberte@Google.com dlaliberte@google.com 5CC, Cambridge MA

Joe-Moran commented 7 years ago

From my limited testing, adding white-space: nowrap; to the styling for my html tooltip seemed to work fine.

cybervoid commented 6 years ago

Hi Guys,

Just an FYI this is still happening, @Joe-Moran white-space work around does the trick.

pieman2201 commented 4 years ago

Hey, this is still an issue. I have some tooltips with long portions of text that I want to wrap, so nowrap wasn't viable for me. I ended up going with <p style="white-space: pre-wrap">[long text chunk] <span hidden>[zero width space]</span></p> and it's working pretty well.