[docs] Add Tooltip TypeScript demos

[Dudrie]

Here are the TypeScript demos for the tooltip components. A few of them did not need additional typing, so I did just create the corresponding tsx file for them.

However, I had a question while doing so: In CustomizedTooltip useState is used to create a ref. Is there a reason why the useRef hook is not used there?

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

No bundle size changes comparing 6981a04...375336f

Generated by 🚫 dangerJS against 375336f

[eps1lon]

@Dudrie Try implementing the same feature with

Suggested change

	const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);
	const arrowRef = React.useRef<HTMLSpanElement>(null);

You will probably need quite a bit of additional code to handle re-rendering.

The current implementation is a smart way to avoid creating ref callbacks and forceUpdate methods.

[Dudrie]

Oh right, useRef does not trigger a re-render if it's current changes. Using this hook would probably add more boilerplate code.

[eps1lon]

Honestly it's one of the reasons I don't like the ref suffix. When used right it doesn't add information but if used wrong it adds confusion. Simply using arrowNode would've been clearer and then it would also be obvious that setArrowNode should only be used in ref props for host or ref forwarding components.

But there's no reason to change this now. Discussions regarding this haven't been very helpful to either side anyway.

[joshwooding]

I forgot to comment on the ref suffix situation last time. For me I don’t think the ref suffix is needed most of the time. I guess I would use it when passing something to the ref prop.

[oliviertassinari]

@Dudrie Thank you!