Draw the rich tooltip without Tailwind

Plan step 36 (actions). <x-rich-tooltip> renders data-md-rich-tooltip
with the bubble's data-md-rich-tooltip-bubble and data-md-side, and
data-md-rich-tooltip-title/-text/-actions on its plain text; no class
list. rich-tooltip.css draws RichTooltipTokens' surface-container,
medium corner, elevation 2, 312px bubble, its corner-to-corner anchor
positioning and its fade, the same shape as tooltip.css.

rich-tooltip.js's leave grace goes from 200ms to M3's 1.5s (ACT-25),
matching tooltip.js. RichTooltipTest is rewritten on the hooks and
ComponentStylesheet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/js/rich-tooltip.js

@@ -2,8 +2,10 @@
  * `materialRichTooltip`: shows an `<x-rich-tooltip>`.
  *
  * Transient (the default): like a plain tooltip — after a short hover on a pointer that can hover,
- * at once on keyboard focus, and it stays while the pointer moves onto the bubble to reach its
- * actions. Persistent: a press on the trigger opens it as a light-dismiss popover.
+ * at once on keyboard focus, standing for M3's 1.5s once the pointer or focus leaves (ACT-25) so
+ * the words can still be read while it moves on, and it stays while the pointer moves onto the
+ * bubble to reach its actions. Persistent: a press on the trigger opens it as a light-dismiss
+ * popover.
  *
  * The trigger is pointed at the bubble with `aria-describedby`, so the explanation — the whole
  * point of a rich tooltip — is read out with the control rather than never at all; a persistent
@@ -13,7 +15,7 @@
  * they are written again whenever the trigger is reached.
  */
 const HOVER_DELAY_MS = 500
-const LEAVE_GRACE_MS = 200
+const LEAVE_GRACE_MS = 1500
 
 document.addEventListener('alpine:init', () => {
     window.Alpine.data('materialRichTooltip', (persistent = false) => ({