[charts][RFC] Tooltip deprecation path

[alexfauquette]

The history during v7

Customizing the tooltip has been a long battle with multiple attempts

Initially, the tooltip had 3 places to override:

• slots.popper: The wrapper component that take car of tooltip position
• itemContent: The content to display if we show the tooltip for a specific item
• axisContent: The content to display if we show the tooltip for a specific axis

The two last have been deprecated in favor of slots.itemContent and slots.axisContent for consistency.

It appeared that slots was not optimal for tooltip for two reasons:

1. It was confusing for users to know which slots is used, and what they can get from its props.
2. People needed extra information to customize their tooltip.

The last solution

We propose to provide a new composition approach (see docs examples)

With this solution we export useItemTooltip and useAxisTooltip. They provide the basics data needed to reproduce our tooltip.

If additional data is required, they can use additional hooks to select data from the container. For example:

function CustomTooltip() {
  const axisData = useAxisTooltip();
  const highlightedItem = useHighlighted(); // Not sure this hook exist yet

 return (
   // A tooltip with a special effect for the series currently highlighted.
  )
}

Breaking changes

Option 1

I would personally be in favor of dropping at the same time slots.popper, itemContent, slots.itemContent, axisContent, and slots.axisContent. And rely on composition

<BarChart>
  <ChartsAxisTooltip />
</BarChart>


<BarChart>
  <ChartsItemTooltip />
</BarChart>

<BarChart>
  <UserCusstomTooltip />
</BarChart>

But the step might be too big for the users.

Option 2

Another option is to remove the itemContent, and axisContent. Deprecate the slots.itemContent and slots.axisContent, encouraging users to set them to null and use composition as a transition period.

It's less breaking change forced to do, but the DX looks crap.

Option 3

Remove all current way to customize tooltip, and provide a slots.tooltip that override the default one.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.