How to make a DetailsList header shows tooltip

Question

How to configure detailsHeader properly to make it show tooltip for the header text? In each column, I've added ariaLabel, name, key, fieldName and have tried the top answer in this post but does not work: How to render a column header with both text and a tooltip icon in Fabric DetailsList

I am using "@fluentui/react": "^8.11.1"

Answer 1

private renderFixedDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
    if (!props) {
        return null;
    }
    const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> =
        (tooltipHostProps: any) => {
            return (
                <TooltipHost content={tooltipHostProps.column.name}>
                    {tooltipHostProps.column.name}
                </TooltipHost>
            );
        }
    return (
        <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
            {defaultRender!({
                ...props,
                onRenderColumnHeaderTooltip,
            })}
        </Sticky>
    );
}

// render Detail Header

public render(): JSX.Element {
    return (
        <ShimmeredDetailsList
            columns={this.state.columns}
            items={this.state.items}
            onRenderItemColumn={this.props.onRenderItemColumn}
            enableShimmer={this.props.isLoading}
            setKey={this.props.setKey}
            key={this.props.setKey}
            selectionMode={SelectionMode.none}
            onShouldVirtualize={() => false}
            onRenderRow={this.props.showBlueBackgroundGrid ? this._onRenderRow : undefined}
            onRenderDetailsHeader={this.renderFixedDetailsHeader}
        />
    );
}

// Render detail list.

The fluent UI provides us onRenderDetailHeader to create our own custom header. You can return the custom header with tooltip or your own styles also.