[charts] The tooltip should get a position option

[alexfauquette]

Summary 💡

Come from this message: https://stackoverflow.com/questions/77590276/customize-the-tooltip-on-a-mui-graph

The idea as I understand it is to force the x/y position of the popper instead of following the mouse position.

placement.mp4

Could be something like sltoProps.popper.placement = 'top' to force the tooltip to appear on top of the chart

Examples 🌈

No response

Motivation 🔦

No response

Search keywords: charts tooltip placement

[MonstraG]

Maybe somewhat overlapping issue:

If chart is placed near the edge of the screen, tooltip can be unreadable as it always gets placed to the right.

[MonstraG]

I've discovered that popper's position options can already be passed:

<BarChart
	series={series}
	xAxis={[xAxis]}
	slotProps={{
		popper: {
			placement: "auto-start" // actually works
		}
	}}
	tooltip={{
		slotProps: {
			popper: {
				placement: "auto-start" // ignored
			}
		}
	}}
/>

but note how there are 2 ways to do it, and one of them doesn't do anything.
My issue is resolved.

[flaviendelangle]

@alexfauquette we should probably either remove tooltip.slotProps.popper from the typing (if not already) or do the merge correctly
Classic slot merging stuff 😆