Social Tooltip
AI Pass+social#tooltip
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Social component
About 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.
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
::beforepseudo-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"witharia-checked, Enter/Space activation- Tooltips
aria-hidden="true"— decorative, label is on the button- Focus indicators
:focus-visiblewith--ringoutline on all elements- Focus tooltips
- JS mirrors hover tooltip behavior on keyboard focus
- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Social Tooltip in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the social is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Radial Share
ReactVanilla
A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.
#social#radial
Social Flip
VanillaReact
Square social icon buttons with a 3D flip animation on hover — each icon sits in a rounded-square button that inverts its background and rotates the icon 360 degrees via a rotateY transform, fully token-driven and design-system agnostic.
#social#icons#flip
Social Icons
VanillaReact
Circle social icon buttons with outline ring and brand color hover fill — each icon sits inside a circular button with a subtle border ring that expands on hover while the background fills with the platform's brand color, fully token-driven and design-system agnostic.
#social#icons
Training Status Popover
VanillaReact
A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.
#popover#progress#ai
Spec Sheet
VanillaReact
Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.
#input#validation#password
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
