Truncate - Update Truncate to pass in custom `tooltipContent`.

[CodyWMitchell]

Is this a new component or an extension of an existing one?
The existing component is the <Truncate /> component.

Describe the feature
The feature is an enhancement to the PatternFly component that allows a developer to customize or override the content of the tooltip that the component automatically provides.

Any other information?
The existing <Truncate /> component automatically adds a tooltip that displays the full, un-truncated text when the user hovers over the truncated element. This creates an issue when the developer needs to provide a custom tooltip (like one with a description and the full name) because it results in two tooltips appearing simultaneously. This blocks RHCLOUD-41396

The expected behavior is to add a new prop to <Truncate />—perhaps called tooltipContent or a function prop that overrides it—that accepts either a string or an element as its value. When this new prop is used, the <Truncate /> component should display the custom content in its tooltip instead of the default un-truncated text. This allows for a single, customized tooltip to be shown when the text is truncated.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.

Example in use:

[gautamkrishnar]

@CodyWMitchell i checked the Jira you shared. It looks like you are trying to do the following:

Add tooltips that show the full length name for truncated names and the description if available.

Since it is an advanced use case, why can't you guys use a tooltip component instead and use the truncate just for truncating?

https://www.patternfly.org/components/tooltip/

import { createRoot } from "react-dom/client";
import "@patternfly/react-core/dist/styles/base.css";
import "./fonts.css";

import "@patternfly/react-core/src/components/Truncate/examples/./TruncateExamples.css";
import { Tooltip, Truncate } from "@patternfly/react-core";

export const TruncateDefault: React.FunctionComponent = () => (
  <div>
    <Tooltip content={"Do your own custom tooltip with anything here"}>
      <Truncate
        maxCharsDisplayed={10}
        tooltipProps={{ triggerRef: null }}
        content={
          "This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text. This super long text."
        }
      />
    </Tooltip>
  </div>
);

const container = document.getElementById("root");
createRoot(container).render(<TruncateDefault />);

If we are going with the solution of passing a custom tooltip to the component, I can see that the following code exist:

patternfly-react/packages/react-core/src/components/Truncate/Truncate.tsx

Lines 60 to 61 in ce02202

	/** Additional props to pass to the tooltip. */
	tooltipProps?: Omit<TooltipProps, 'content'>;

The easiest way to allow this customisation would be to remove this omission of content rather than adding a new prop named tooltipContent.

[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.