patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Add tooltipProps to Truncate

Open gitdallas opened this issue 1 year ago • 1 comments
trafficstars

Currently, using Truncate mandates that a popover is included and doesn't give any flexibility with how it is implemented.

It would be helpful to have a noTooltip prop if we didn't want one, or wanted to add our own Tooltip wrapper.

We could also have a tooltipProps prop that would get spread to the internal tooltip.

This came up because of this from a figma design, in which the tooltip for truncated text includes a bold description header and is left aligned: image

Workaround would be to manually truncate with css and wrap with Tooltip.

gitdallas avatar Jul 22 '24 13:07 gitdallas

cc @andrew-ronaldson

tlabaj avatar Aug 22 '24 15:08 tlabaj

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

github-actions[bot] avatar Oct 23 '24 11:10 github-actions[bot]

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

github-actions[bot] avatar Dec 30 '24 11:12 github-actions[bot]

In the case of the screenshot, the tooltip really shouldn't include any other content than the full truncated content, especially not stylized text, semantic markup, etc.

There may be some other tooltip props that could be worth exposing for some finetuning (zindex, animationDuration, the width props, isContentLeftAligned as examples?).

thatblindgeye avatar Jan 30 '25 13:01 thatblindgeye

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

github-actions[bot] avatar Apr 08 '25 11:04 github-actions[bot]

As part of this, it may be a good idea for us to include an example of Truncate being used to truncate <a> text content, as I've been seeing that implementation quite a bit (and getting Truncate to work properly requires a little manual lift it seems; just setting the tooltip's triggerRef to point to the <a> should work from what I tested)

thatblindgeye avatar Apr 08 '25 12:04 thatblindgeye