# Social Tooltip

> Circle social icon buttons with floating tooltip popups on hover and brand color fill — five platform icons (Facebook, GitHub, Instagram, LinkedIn, X) in neutral circles with shadow, each revealing a brand-matched tooltip with bounce easing on hover.

- Category: Social
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: tooltip
- Page: https://builder.atheros.ai/components/social-tooltip
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_social_tooltip/preview-c0ad2cc746f3.webp

## Features

- Five circle icon buttons for Facebook, GitHub, Instagram, LinkedIn, and X with Tabler brand SVG icons
- Floating tooltip slides up above each icon on hover with bounce easing `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
- Tooltip has a downward-pointing arrow via CSS `::before` pseudo-element with inherited brand color
- Circle and tooltip fill with platform brand color on hover — icon flips to white
- Brand colors swap to accessible dark-mode variants via CSS custom properties
- Keyboard-accessible focus states mirror hover tooltip behavior via JS
- Responsive layout wraps icons at narrow widths

## Accessibility

- **ARIA labels** — All icon buttons have `aria-label`
- **Theme toggle** — `role="switch"` with `aria-checked`, Enter/Space activation
- **Tooltips** — `aria-hidden="true"` — decorative, label is on the button
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Focus tooltips** — JS mirrors hover tooltip behavior on keyboard focus
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Activate the focused theme toggle
- `Space` — Activate the focused theme toggle
- `Tab` — Navigate between icon buttons — tooltip appears on focus

## Common questions

**Which frameworks is Social Tooltip available in?**

Social Tooltip ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Social Tooltip free?**

Social Tooltip is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Social Tooltip support dark mode?**

Yes. Social Tooltip ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Social Tooltip live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/social-tooltip

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt