Antd: How can I add tooltip to a column header for a table

Question

I want to add custom tooltip for each column headers of a table

I tried is using tooltip for title but that does not trigger on whole cell area

{
  title: <Tooltip />
}

Is there a simple way to do this instead of removing cell padding and adding padding for the title so that title takes up entire space?

Answer 1

You can use onHeaderCell prop and a useState trick:

const [tooltipOpen, setTooltipOpen] = useState(false)
const columns = [{
  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)
    }
  }
}

Now when your mouse hover your title cell tooltip will popup. You can find a working example here.