Tooltip onhover of DetailsList item.

[michaeldera]

Describe the feature that you would like added

I would like for an item in a DetailsList to show a tooltip when there isn't enough space to be fully visible. It allows the content on the cell to be read without the need to increase the size.

What component or utility would this be added to

• DetailsList Component and all components based off it.
• GroupedList has also been requested in GroupedList items should show a tooltip on hover/focus when truncated #14793

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

[JustSlone]

Given this is a common scenario and needed for accessibility, it seems reasonable to add to DetailsList.

However, as usual it's far more involved to add something like this by default for all clients of DetailsList. Therefore, in the meantime, this can be accomplished by using a custom render function and wrapping the item with a TooltipHost that has this prop: overflowMode={TooltipOverflowMode.Parent}.

Example:

// This custom Item Render function adds a TooltipHost that only shows the tooltip
// when the parent element overflows with content
function customItemRender(item) {
  return (
    <TooltipHost id={item.key} content={item.name} overflowMode={TooltipOverflowMode.Parent}>
      <span aria-describedby={item.key}>{item.name}</span>
    </TooltipHost>
  );  
}

CodePen: https://codepen.io/justslone-the-encoder/pen/bGpQdQj?editors=0010

[michaeldera]

Given this is a common scenario and needed for accessibility, it seems reasonable to add to DetailsList.

However, as usual it's far more involved to add something like this by default for all clients of DetailsList. Therefore, in the meantime, this can be accomplished by using a custom render function and wrapping the item with a TooltipHost that has this prop: overflowMode={TooltipOverflowMode.Parent}.

Example:

// This custom Item Render function adds a TooltipHost that only shows the tooltip
// when the parent element overflows with content
function customItemRender(item) {
  return (
    <TooltipHost id={item.key} content={item.name} overflowMode={TooltipOverflowMode.Parent}>
      <span aria-describedby={item.key}>{item.name}</span>
    </TooltipHost>
  );  
}

CodePen: https://codepen.io/justslone-the-encoder/pen/bGpQdQj?editors=0010

Alright, this will have to do at the moment. Thank you @JustSlone

[msft-fluent-ui-bot]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.