feat: ease-tooltip — CSS-only animated tooltip component

[AjayBandiwaddar]

Pull Request Description

Adds ease-tooltip — a CSS-only animated tooltip component that appears on hover and keyboard focus. Closes #[GAP1 issue number].

No JavaScript required. The bubble fades in and slides 4px into position using opacity + transform transitions on ::before and ::after pseudo-elements. Tooltip text lives in a data-tip attribute — zero extra markup overhead.

---

Type of Change

• 🧩 New component

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/examples/ease-tooltip/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A pure CSS tooltip component with 4 directional variants (top, bottom, left, right), semantic color overrides, and full keyboard accessibility via :focus-within — all driven by --ease-* tokens with zero JavaScript.

How does a developer use it?

<!-- Default: tooltip above -->
<span class="ease-tooltip" data-tip="Save changes">
  <button>Save</button>
</span>

<!-- Bottom -->
<span class="ease-tooltip ease-tooltip-bottom" data-tip="Opens in new tab">
  <button>Learn more</button>
</span>

<!-- Left -->
<span class="ease-tooltip ease-tooltip-left" data-tip="Go back">
  <button>←</button>
</span>

<!-- Right -->
<span class="ease-tooltip ease-tooltip-right" data-tip="Copy to clipboard">
  <button>Copy</button>
</span>

<!-- Semantic color variant — just override --tooltip-bg -->
<span class="ease-tooltip ease-tooltip-danger" data-tip="This cannot be undone">
  <button>Delete</button>
</span>

Why does it fit EaseMotion CSS?

Tooltips are listed as Planned v1.2 in VISION.md — this submission directly delivers that milestone. The implementation follows EaseMotion's core philosophy exactly:

• Human-readable classes — .ease-tooltip-bottom is self-explanatory
• Token-first — every value (--tooltip-bg, --tooltip-speed, --tooltip-offset, --tooltip-radius) maps to an existing --ease-* custom property
• Animation-first — the 4px slide + fade entrance matches the motion language already used by ease-slide-up and ease-card-hover
• Zero JS — ::before + ::after pseudo-elements on the wrapper, text from data-tip
• Composable — works on ease-btn, icon buttons, inline text, any element

---

Demo

• Demo added (demo.html works by opening directly in a browser)

The demo covers 5 sections:

1. All 4 position variants side by side
2. Icon button toolbar (real-world pattern)
3. Semantic color variants (success, danger, warning, info)
4. Inline prose usage (glossary terms, abbreviations)
5. Keyboard-only focus demonstration (Tab through to trigger)

---

Browser Testing

• Chrome
• Edge

---

Notes for Maintainer

• Class names in the submission use .tooltip, .tooltip-bottom etc. — please rename to ease-tooltip, ease-tooltip-bottom etc. on integration as per the naming convention
• The --tooltip-bg CSS variable pattern means semantic color variants (ease-tooltip-danger, ease-tooltip-success) can be added with a single line each — no structural changes needed
• prefers-reduced-motion block is included — transitions are disabled but the tooltip still appears/disappears so no information is ever hidden from users who need reduced motion
• Verified: no existing submission or core class covers this. The closest existing component ease-accordion is a vertical inline expander — functionally and structurally different from a floating positioned tooltip
• Inspired by the tooltip patterns in Tailwind UI and DaisyUI but written entirely from scratch using EaseMotion's token system

[github-actions]

✅ Submission Validation Passed

All required files (demo.html, style.css, and README.md) are now present. Thank you!