tooltips: Group tooltips for a smooth transition.

This commit introduces the use of createSingleton from the Tippy.js
library to group the tooltips of compose box formatting buttons. The
main benefit is that the hover delay only applies when you move the
cursor into the group for the first time — after that, tooltips show up
instantly as you move between buttons. It makes the whole experience
feel a lot smoother.

We store the singleton instance in a variable to avoid creating multiple
instances unnecessarily. Before initializing a new singleton, we destroy
the previous one to prevent memory leaks and ensure correct behavior.

Previously, each formatting button had its own independent tooltip with
separate delays, which made the experience feel sluggish and disjointed
when hovering across buttons.

Now, by sharing a delay timer across the grouped tooltips, the
transition feels more natural.

Fixes: #24825.

Co-authored-by: Sayam Samal <sayam@zulip.com>

web/src/tippyjs.ts

@@ -54,6 +54,14 @@ export const LONG_HOVER_DELAY: [number, number] = [750, 20];
 // keyboard shortcut. For these tooltips, it's very important to avoid
 // distracting users unnecessarily.
 export const EXTRA_LONG_HOVER_DELAY: [number, number] = [1500, 20];
+// These delays are specifically for singleton tooltips. Unlike default tooltips,
+// singleton tooltips can feel disconnected or abrupt when using the default hide delays
+// from INSTANT_HOVER_DELAY or LONG_HOVER_DELAY, due to the very low hide timings we use.
+
+// To address this, we increase the hide delay to 250ms. This ensures smoother transitions
+// and prevents tooltips from disappearing too quickly, improving the overall UX.
+export const SINGLETON_INSTANT_HOVER_DELAY: [number, number] = [100, 250];
+export const SINGLETON_LONG_HOVER_DELAY: [number, number] = [750, 250];
 
 // We override the defaults set by tippy library here,
 // so make sure to check this too after checking tippyjs