Fix tooltip text overflow #41703
Fix tooltip text overflow #41703
Conversation
markov00
added
bug
💚 Build Succeeded |
markov00
added
the
Team:Visualizations
|
Pinging @elastic/kibana-app |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
| @@ -97,6 +102,42 @@ Tooltip.prototype.show = function () { | |||
| left: placement.left, | |||
| top: placement.top | |||
| }); | |||
| const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length; | |||
There was a problem hiding this comment.
Seems like a lot of match and element targeting. I'd suggest highly commenting on what is going on so others can follow in case anything needs to be adjusted.
|
@markov00 once ready, any chance we can backport this fix ? |
|
@AlonaNadler we will backport this to 7.4, but I think backporting it to a patch release like 7.3.1 or older is a bit out out the usual scope of patch release in kibana, what do you think? |
|
@cchaos as agreed in our zoom call, I've reverted back the css changes to use directly: overflow-wrap: break-word;
word-wrap: break-word;On IE11 can slightly differ of few pixel/chars probably because of some differences in text size computation. on macOS-Chrome: on IE11 piechart on macOS-Chrome piechart on IE11 |
💚 Build Succeeded |
|
Running Kibana 8.5 and this is still an issue on chrome 114.0.5735.90
|
|
@CME64 Thanks for reporting this bug. Your issue is actually a different component than that mentioned in this issue. Could you please open a new issue so we can track and prioritize it accordingly. |
Summary
This PR fix the text overflow of tooltips on point series and on pie charts.
The tooltip is build with a table, each column needs to be configured to break long text strings into multiple lines. To achieve this we need to specify a max-width to the container of the cell.
That
max-widthis the available space on the tooltip minus the column width used for displaying the data value. Whenever possible we want to keep the value column with his maximum extent (to avoid breaking its text into new lines), so we apply the breaking style to the other columns.Only in one case we apply the breaking on the value column is in the case the value column is larger than half of the max tooltip width.
before:
after:
before:
after:
fix #31846
fix #41039
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
[ ] This was checked for breaking API changes and was labeled appropriately[ ] This includes a feature addition or change that requires a release note and was labeled appropriately