[Tooltip] Improve docs / add more examples

[techniq]

Extracted from #45 (comment)

With TooltipContext / Tooltip, there are basically 3 ways to position:

• By default, TooltipContext will use the mouse/pointer position, and Tooltip will apply an offset by default (mostly to not cover up the point you are interested in)
• In TooltipContext, you can opt into snapping the position to the closest data point's X and/or Y
• In Tooltip, you can specify explicit top / left positions, overwriting/ignoring what is set in the TooltipContext. This was a recent addition we made for the Sparkline example, but I'd like to add more examples to show what kind of use cases this supports
  • A fixed tooltip in the top left (or any corner) by specifying values for both props (ex. <Tooltip top={8} left={8} />)
  • Only specifying a fixed top such as this visx example or these Observable plot examples which would use 2 instances of <Tooltip>, one with a fixed top and one with a fixed left.

Examples

• Fixed location (ex. top/left)
• Fixed y with dynamic x
• Multiple tooltips
  • Show x and/or y value on axis
  • https://observablehq.com/plot/interactions/crosshair
  • https://airbnb.io/visx/areas
  • https://trash-and-fire.github.io/svelte-lightweight-charts/official-samples.html