How to render a column header with both text and a tooltip icon in Fabric DetailsList

Question

In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).

score 3 · Answer 1 · answered Apr 13 '20 at 08:50

A hack way, although the name prop is defined as string type, in fact we can pass a ReactNode to it, just need to cast its type to any.

Example code:

import { Tooltip } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

const columns: IColumn[] = [
{
  name: <div>xxx <Tooltip title="tooltip"><InfoCircleOutlined /></Tooltip></div> as any,
  ...
},
...
]

<DetailsList columns={columns} .../>

Effects:

score 2 · Accepted Answer · answered Nov 15 '18 at 21:31

2

Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip: (tooltipHostProps) => {
         return (
            <Fabric.TooltipHost {...tooltipHostProps} />
         )
      }
   })
}

answered Nov 15 '18 at 21:31

Vitalie Braga

476
2
3

1

By the way, this doesn't work with versions under 6.102: https://github.com/OfficeDev/office-ui-fabric-react/releases/tag/office-ui-fabric-react_v6.102.0 – Eric Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default. – Vitalie Braga Nov 21 '18 at 01:47
One issue I am running into with this approach is that this seems to prevent the "AccessibleLabel" from getting rendered on the headers. Take a look at https://github.com/microsoft/fluentui/blob/d85af4b0eb272cadeb80a9ac71e0552d14653e4e/packages/react/src/components/DetailsList/DetailsColumn.base.tsx, in the "_renderAccessibleLabel()" method. How can I get both the tooltip and the accessible label to show up? Appreciate any pointers. – Snooks May 19 '21 at 19:46

score 1 · Answer 3 · edited Jul 01 '21 at 00:59

My solution is similar to Vitalie Braga's, but with a more detailed return of the onRenderColumnHeaderTooltip you can achieve this functionality. I based populating the tooltipHostProps.children from this stack overflow question, and you can also see more about styling the tooltip headers there.

One way you can achieve filtering is by looking at the tooltipHostProps.id to specify that you only want the tooltip icon on certain column header cells. In your example, the code would look something like the following:

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip=(tooltipHostProps) => (
            <>
                <span>
                    {tooltipHostProps?.children}
                </span>
                {tooltipHostProps?.id?.includes('value') &&
                    <span>
                        <TooltipHost content={"This is the tooltip"}>
                            <Icon iconName="info" />
                        </TooltipHost>
                    </span>
                }
            </>
        )}
   );
};

How to render a column header with both text and a tooltip icon in Fabric DetailsList

3 Answers3

Linked