Antd：如何将工具提示添加到表格的列标题

Question

我尝试使用工具提示作为标题，但这不会在整个单元格区域触发

{
  title: <Tooltip />
}

有没有一种简单的方法可以做到这一点，而不是删除单元格填充并为标题添加填充，以便标题占据整个空间？

Answer 1

你可以使用

onHeaderCell

道具和一点

useState

技巧：

const [tooltipOpen, setTooltipOpen] = useState(false)
const comuns = [{
  title: <Tooltip open={tooltipOpen}> colum title </tooltip>,
  onHeaderCell: handleOnHeaderCell
  ...
}]

function handleOnHeaderCell() {
  return {
    onMouseEnter: () => {
      console.log('mouse enter')
      setTooltipOpen(() => true)
    },
    onMouseLeave: () => {
      console.log('mouse leave')
      setTooltipOpen(() => false)
    }
  }
}

现在，当鼠标悬停时，标题单元格工具提示将会弹出。 您可以在here找到一个工作示例。