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

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:

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} />
         )
      }
   })
}

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>
                }
            </>
        )}
   );
};