enhancement
major
minor
defect
critical
major
minor
minor
#30214
View layer: tooltips drop the line breaks of their text (.tl-tooltip__body has white-space: normal)
In the React view layer (tl-layout-view 8.0.0-alpha12.817), a tooltip whose text contains line breaks displays them as spaces: the tooltip body is styled as follows : .tl-tooltip__body { white-space: normal; }, so paragraphs separated by a blank line run together.
Reproduction: a table column with a tooltip expression that returns text containing paragraphs, e.g.
<column name="name"> <tooltip>"First paragraph.\n\nSecond paragraph."</tooltip> </column>
Hovering over the cell displays "First paragraph. Second paragraph." on a single line. The same text displayed in a form (e.g., as a text field with multi-line rendering) retains its paragraphs.
Expected: The tooltip should preserve the line breaks in its text (white-space: pre-line on .tl-tooltip__body), since the text is plain text, not HTML.
Workaround in the E-Home application: .tl-tooltip__body { white-space: pre-line; } in the app’s stylesheet.
Solution
A tooltip containing plain text retains the line breaks in its text: a \n is a line break, and a blank line separates paragraphs (as with tl-text). A tooltip with HTML allowed by the server continues to wrap according to its markup; line breaks in the HTML source code are not visible there.
- Tooltips for table columns (<column><tooltip>) and all other plain-text tooltips: In the design system, the text body uses the variant `tl-tooltip__body--text ` with ` white-space: pre-line;` while the HTML body retains ` white-space: normal`.
- Tooltip for a display via expression (<display> with <tooltip>, e.g., in the node column of a tree table): This text is sent to the client as HTML (ResourceProvider.getTooltip() returns HTML). ResourceDisplayByExpression therefore inserts a <br /> tag after escaping for each line break in the text.
The workaround in an application’s stylesheet is then no longer necessary.