[Tooltip] Improve structure and default styles

[techniq]

• [x] Improve structure
• [x] Improve default styling
• [x] Support TooltipItem colors
• [ ] Add default slot implementation

Instead of

<Tooltip header={(data) => formatDate(data.date, "eee, MMMM do")} let:data>
  <TooltipItem label="value" value={data.value} />
</Tooltip>

a better structure

<Tooltip.Root let:data>
  <Tooltip.Header>{formatDate(data.date, "eee, MMMM do")}</Tooltip.Header>
  <Tooltip.List>
    <Tooltip.Item label="value" value={data.value} />
  </Tooltip.List>
</Tooltip.Root>

With this structure, TooltipHeader will need to use col-span-full since it will be within the default slots's grid

[techniq]

Reference for improved default styling

shadcn

tremor

See also:

• https://echarts.apache.org/examples/en/#chart-type-line
• https://nivo.rocks/line/