[joy-ui][Tooltip] Add ability to use tooltip in "childfree" mode

Summary

Currently, the only way to have several elements with the same tooltip is to wrap each element with it:

{rows.map(row => (
	<Tooltip key={rows.id} title={row.tooltipTitle}>
		<div>{row.text}</div>
	</Tooltip>
)}

If there are 100 rows, there are 100 divs and 100 Tooltips.

For most cases this is okay.

But, if tooltips are controlled, each row must re-render on tooltip state change.

It seems that using something like a context tooltips can be made to work this way:

{rows.map((row) => (
	<div key={row.id} onHover={(e) => setTooltipContextOrSmth({position: e.position, title: row.title)}>
		{row.text}
	</div>
))}
<Tooltip {...tooltipContextOrSmth} />

I am not sure how big of a portion of this behavior should be part of the library, but at least being able to set position (or anchor) I think is a must.

If this is already possible, I would like to see an example in docs, I did not find any.

You can probably already achieve this with menus or popovers, but it feels weird to reimplement tooltip just to move it somewhere.

Examples

n/a?

Motivation

In my pet project, I'm making a tooltip-synced """chart""":

If you hover one of the top columns or one of the bottom columns, the other's tooltip will open also, and for big """charts""" I'm getting performance hit on hover.

Yes, this particular use-case is probably solved by an actual charts built with , like mui-charts, but same problem could happen in tables or for github activity for example:

Search keywords: one tooltip multiple hosts childfree childrenless anchor position host

Start by reading the Joy UI Tooltip implementation and its existing documentation, then compare the related menus and popovers mentioned in the issue. Define how a childfree mode would receive an anchor or position, support controlled tooltips, and avoid per-row wrappers; done should include the requested behavior and a documentation example if the capability is already available.