[Truncate] - Multi line truncation and scrollable tooltip

[christianvogt]

Is this a new component or an extension of an existing one?
existing component: Truncate

Describe the feature
Add support to set the number of lines to truncate to. For example I want to display descriptions up to 2 lines tall, afterwards show the ellipsis with tooltip.

On top of this, when truncating a description, often the tooltip opens to a large block of centre justified text which is not ideal. Can this component support a popover that is scrollable and doesn't centre justify text.

[thatblindgeye]

On top of this, when truncating a description, often the tooltip opens to a large block of centre justified text which is not ideal. Can this component support a popover that is scrollable and doesn't centre justify text.

This would have issues. While we do have a hoverable popover implementation, the intent behind that implementation is that the popover doesn't contain any interactive content/interactivity, which adding a scrollbar would go against that. So to use a popover that can include the full description text and be scrollable, ideally there would need to be a button to click in order to trigger the popover so that focus could be moved into it + a button to close the popover and return to that button.

[christianvogt]

@thatblindgeye
For example we will use this component in tables, and if the user hovers over the truncated description it sometimes expands to be very tall, skinny, and centre justified.

We want the truncation feature and also only want to include a tooltip whenever the truncation is present. Maybe an interactive popover is the solution for us.

Does PF have any suggestions what we should do?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[thatblindgeye]

@andrew-ronaldson @kaylachumley is there any design consideration for this?

Otherwise @christianvogt (apologies for the delayed response to above), depending if there's a recommendation from a design standpoint, would any of the following be viable solutions for you use case?

• Changing the width of the Tooltip (this would probably only really work at larger viewports; mobile-ish sizes you'll most likely still end up with the narrow and tall issue you mentioned)
• Using the truncate expandable section implementation
• Setting up something similar to the Expandable text with character truncation demo we have (that might benefit from us allowing consumers to disable the tooltip on Truncate if there's some other mechanism to show the full content, though)

The last 2 options do end up needing at least 2 lines of space might be one consideration/issue I suppose depending on your UI.

[christianvogt]

Our requirement was to show two lines of text plus a view more option.
While we can just use line-clamp i figured it may be useful for PF to supply the option as part of the Truncate component.