Skip to content

Bug - DataList - truncated content does not trigger a tooltip and is not focusable #11389

@thatblindgeye

Description

@thatblindgeye

Describe the problem
The truncated content in examples (e.g. controlling text example) cannot be navigated to via keyboard.

Additionally, a tooltip must trigger for truncated content, otherwise that content gets lost to users.

See how Alert handles truncation:

<TitleComponent
{...(isTooltipVisible && { tabIndex: 0 })}
ref={titleRef}
className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)}

How do you reproduce the problem?
Go to the above example and notice that no tooltip triggers on mouse hover and that the truncated content cannot be focused.

Expected behavior
A tooltip triggers showing all of the text content via mouse hover and keyboard focus.

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

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

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

Any other information?

Metadata

Metadata

Assignees

Type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions