Skip to content

Bug - Truncate - Tooltip not shown for middle truncation when maxCharsDisplayed is not set #11811

@jenny-s51

Description

@jenny-s51

Describe the problem
When using the Truncate component with position="middle" and without maxCharsDisplayed (relying on resize observer logic), the tooltip does not appear even when the text content visually requires truncation.

How do you reproduce the problem?

Go to https://www.patternfly.org/components/truncate/#middle and apply the code block below:

import { Truncate } from '@patternfly/react-core';

const Middle = () => (
  <div className="truncate-example-resize">
    <Truncate
      content={'this is a test this is a test this is a test this is a test th'}
      trailingNumChars={7}
      position={'middle'}
    />
  </div>
)

Expected behavior
Tooltip is still applied.

Is this issue blocking you?
List the workaround if there is one.
No.

Screenshots
If applicable, add screenshots to help explain the issue.
See opendatahub-io/odh-dashboard#4121 (comment).

What is your product and what release date are you targeting?
RHOAI

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions