patternfly-react
patternfly-react copied to clipboard
Add tooltipProps to Truncate
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:
Workaround would be to manually truncate with css and wrap with Tooltip.
cc @andrew-ronaldson
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
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?).
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
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)