Proposal: Global CSS Anchor Positioning Tooltip System

[Injora]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Motivation

Currently, the Docusaurus classic theme relies on native browser tooltips (via the title attribute) for elements like the ColorModeToggle, navbar items, and action buttons. These native tooltips have a built-in OS delay, cannot be styled to fit the Infima theme, and disrupt the premium interactive feel of modern documentation sites.

Following feedback from @slorber on PR #11891, I am proposing the introduction of a comprehensive, global Tooltip system to Docusaurus using modern CSS—specifically the CSS Anchor Positioning API—to replace native tooltips across the whole theme.

Proposed Architecture

1. CSS Anchor Positioning API
To avoid expanding the JavaScript bundle with heavy positioning libraries like Floating UI or Popper.js, we can tether the tooltip to its trigger element using the CSS Anchor Positioning API. This keeps the framework lean while delivering robust, responsive positioning.
(Note: As Anchor Positioning is still gaining baseline support, a gracefully degraded CSS fallback would be included for unsupported browsers).

2. Component API
Introduce a headless, reusable <Tooltip> component in docusaurus-theme-common and a beautifully styled implementation in docusaurus-theme-classic.

Example concept:

import Tooltip from '@theme/Tooltip';

<Tooltip text="Switch between dark and light mode" placement="bottom">
  <ColorModeToggle />
</Tooltip>


### Self-service

- [x] I'd be willing to do some initial work on this proposal myself.

[Pantkartik]

Proposed Solution

1. CSS-based Positioning
   Use the CSS Anchor Positioning API to position tooltips relative to their trigger elements.
   Keeps implementation lightweight
   Avoids adding external JS libraries
   Includes a fallback for unsupported browsers using basic CSS positioning
2. Component API
   I```
   import Tooltip from '@theme/Tooltip';

``` **Proposed props:** text placement (top, bottom, left, right) delay interactive disabled

Implementation Plan

• Create Tooltip in docusaurus-theme-common
• Add styled version in docusaurus-theme-classic
• Implement fallback positioning
• Replace native tooltips
• Add documentation and tests