Tooltips
Five tooltip treatments: glass, gradient, arrow, high-contrast dark and a sliding entrance. Each is self-contained (no radix), sized and token-driven, and opens on hover or keyboard focus.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/tooltips-styledDependencies, the @ai2/tokens theme and the component file are installed together.
Copy the source
components/ui/tooltips-styled.tsx"use client"
import type * as React from "react"
import { cn } from "@/lib/utils"
/* Tooltip family: 5 decorative tooltips. Self-contained (no radix, no new deps) - it
opens on hover/focus with CSS, and the transform transitions are protected with
motion-reduce. Color comes ONLY from tokens. Size = the bubble padding/text.
children = the trigger, content = the tooltip text. The bubble is centered above
the trigger. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const bubbleSize: Record<StyledSize, string> = {
sm: "px-2 py-1 text-xs",
md: "px-2.5 py-1.5 text-xs",
lg: "px-3 py-2 text-sm",
xl: "px-3.5 py-2.5 text-sm",
}
const bubbleBase =
"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-56 -translate-x-1/2 translate-y-1 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none"
interface Props {
size?: StyledSize
content: React.ReactNode
children: React.ReactNode
className?: string
}
function Wrapper({ children, bubble }: { children: React.ReactNode; bubble: React.ReactNode }) {
return (
<span data-slot="styled-tooltip" className="group relative inline-flex">
{children}
{bubble}
</span>
)
}
/* Glass: buzlu cam balon. */
export function GlassTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span
role="tooltip"
className={cn(bubbleBase, bubbleSize[size], "border border-border bg-surface-2/70 text-foreground supports-[backdrop-filter]:bg-surface-2/40 supports-[backdrop-filter]:backdrop-blur-md", className)}
>
{content}
</span>
}
>
{children}
</Wrapper>
)
}
/* Gradient: token gradyan balon. */
export function GradientTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span
role="tooltip"
className={cn(bubbleBase, bubbleSize[size], "text-info-foreground [background-image:linear-gradient(135deg,var(--info),var(--brand))]", className)}
>
{content}
</span>
}
>
{children}
</Wrapper>
)
}
/* Arrow: alt ucunda oklu klasik balon. */
export function ArrowTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span role="tooltip" className={cn(bubbleBase, bubbleSize[size], "border border-border bg-popover text-popover-foreground", className)}>
{content}
<span className="absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-border bg-popover" />
</span>
}
>
{children}
</Wrapper>
)
}
/* Dark: yuksek kontrast (foreground zemin). */
export function DarkTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span role="tooltip" className={cn(bubbleBase, bubbleSize[size], "bg-foreground text-background", className)}>
{content}
</span>
}
>
{children}
</Wrapper>
)
}
/* Slide: daha belirgin kayma ile giren balon. */
export function SlideTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span
role="tooltip"
className={cn(
"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-56 -translate-x-1/2 translate-y-3 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none",
bubbleSize[size],
"border border-border bg-secondary text-secondary-foreground",
className
)}
>
{content}
</span>
}
>
{children}
</Wrapper>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Glass
A frosted-glass bubble.
import { GlassTooltip } from "@/components/ui/tooltips-styled"
<GlassTooltip content="Tooltip text">
<button>Hover me</button>
</GlassTooltip>Gradient
A token gradient bubble.
import { GradientTooltip } from "@/components/ui/tooltips-styled"
<GradientTooltip content="Tooltip text">
<button>Hover me</button>
</GradientTooltip>Arrow
A classic bubble with a pointing arrow.
import { ArrowTooltip } from "@/components/ui/tooltips-styled"
<ArrowTooltip content="Tooltip text">
<button>Hover me</button>
</ArrowTooltip>Dark
A high-contrast bubble on the foreground token.
import { DarkTooltip } from "@/components/ui/tooltips-styled"
<DarkTooltip content="Tooltip text">
<button>Hover me</button>
</DarkTooltip>Slide
A bubble that slides in more noticeably.
import { SlideTooltip } from "@/components/ui/tooltips-styled"
<SlideTooltip content="Tooltip text">
<button>Hover me</button>
</SlideTooltip>ai2 Tooltips: 5 styled variations on the token system
The ai2 Tooltips are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around hover tooltips. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: the bubbles fade and rise on token CSS transitions when the trigger is hovered or focused. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the fade and rise transitions are disabled and the bubble appears instantly.
What is in the ai2 Tooltips?
5 exports in one file: Glass, Gradient, Arrow, Dark and Slide. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: the bubbles fade and rise on token CSS transitions when the trigger is hovered or focused.
- Reduced-motion aware: Under prefers-reduced-motion, the fade and rise transitions are disabled and the bubble appears instantly.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Tooltips sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.