TooltipHost不适用于溢出模式

Question

我正在使用DetailsList方法的onRenderDetailsHeader组件，它看起来像：

onRenderDetailsHeader={(props) => {
  return (
    <DetailsHeader {...props}
      onRenderColumnHeaderTooltip={tooltipProps => <TooltipHost overflowMode={TooltipOverflowMode.Parent} {...tooltipProps} />} 
    />);
}}

我想实现的是在存在溢出时显示Tooltip。

我做了这个Codepen example，重点是第Date Modified列。

注意：

未提供overflowMode时一切正常，但我不想在溢出的每一列上显示工具提示。

谢谢。

更新->临时解决方案：

我已经提出了一种方法来检查元素是否包含溢出：

private hasOverflow(elementId: string): boolean {
  const element = document.getElementById(elementId);
  if (element && 0 > element.clientWidth - element.scrollWidth) return true;
  return false;
}

下一步：

onRenderDetailsHeader={props => {
  return (
    <DetailsHeader {...props}
      onRenderColumnHeaderTooltip={tooltipProps => {
        if (tooltipProps && tooltipProps.id) {
          const id = `${tooltipProps.id.split('-').slice(0, 2).join("-")}-name`;
          return this.hasOverflow(id) ? (<TooltipHost {...tooltipProps} />) : (<TooltipHost {...tooltipProps} content={undefined} />);
        }
        return null;
      }}
    />
}}

Codepen example