[Tooltip] Improve structure and default styles

[techniq]

TODO

• [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 let:data>
  <TooltipHeader>{formatDate(data.date, "eee, MMMM do")}</TooltipHeader>
  <TooltipItem label="value" value={data.value} />
</Tooltip>

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/