Shape tooltips
Five shaped bubbles: a speech bubble, a pill, a notch, a callout and a compact badge. Each is self-contained, sized 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-shapeDependencies, the @ai2/tokens theme and the component file are installed together.
Copy the source
components/ui/tooltips-shape.tsx"use client"
import type * as React from "react"
import { cn } from "@/lib/utils"
/* Shape tooltip family: 5 shaped bubbles (a speech bubble, a pill, a notched/ticket
edge, a protrusion, a small chip). Self-contained (no radix, no new deps) - it
opens on hover/focus with CSS, and the transform transitions are protected with
motion-reduce. The arrow/tail is colored ONLY from tokens. size = the bubble
padding/text. */
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",
}
/* A base with no radius - each shape adds its own corner rounding. */
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 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>
)
}
/* Bubble: alt ucunda token kuyruklu konusma balonu. */
export function BubbleTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span role="tooltip" className={cn(bubbleBase, bubbleSize[size], "rounded-xl border border-border bg-popover text-popover-foreground", className)}>
{content}
<span className="absolute left-1/2 top-full size-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] border-b border-r border-border bg-popover" />
</span>
}
>
{children}
</Wrapper>
)
}
/* Pill: tam yuvarlak hap balon. */
export function PillTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span role="tooltip" className={cn(bubbleBase, bubbleSize[size], "rounded-full border border-border bg-popover text-popover-foreground", className)}>
{content}
</span>
}
>
{children}
</Wrapper>
)
}
/* Notch: yanlarindan cenetlenmis bilet kenari (token background delikler). */
export function NotchTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span
role="tooltip"
className={cn(
bubbleBase,
bubbleSize[size],
"rounded-lg border border-border bg-popover text-popover-foreground",
"before:absolute before:left-0 before:top-1/2 before:size-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-border before:bg-background before:content-['']",
"after:absolute after:right-0 after:top-1/2 after:size-2.5 after:translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-border after:bg-background after:content-['']",
className
)}
>
{content}
</span>
}
>
{children}
</Wrapper>
)
}
/* Callout: renkli token sol kenarli cikinti balonu. */
export function CalloutTooltip({ size = "md", content, children, className }: Props) {
return (
<Wrapper
bubble={
<span
role="tooltip"
className={cn(bubbleBase, bubbleSize[size], "rounded-md border border-l-4 border-border border-l-info bg-popover text-left 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>
)
}
/* Badge: kucuk, kompakt cip stili ipucu. */
export function BadgeTooltip({ 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-1.5 w-max max-w-56 -translate-x-1/2 translate-y-1 rounded-full px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide opacity-0 shadow-sm 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",
"bg-info text-info-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.
Bubble
A speech bubble with a token tail.
import { BubbleTooltip } from "@/components/ui/tooltips-shape"
<BubbleTooltip content="Speech bubble">
<button>Hover me</button>
</BubbleTooltip>Pill
A fully rounded pill bubble.
import { PillTooltip } from "@/components/ui/tooltips-shape"
<PillTooltip content="Rounded pill">
<button>Hover me</button>
</PillTooltip>Notch
A notched, ticket-style edge.
import { NotchTooltip } from "@/components/ui/tooltips-shape"
<NotchTooltip content="Notched edge">
<button>Hover me</button>
</NotchTooltip>Callout
A callout with a colored token left border.
import { CalloutTooltip } from "@/components/ui/tooltips-shape"
<CalloutTooltip content="Colored callout">
<button>Hover me</button>
</CalloutTooltip>Badge
A tiny compact chip-style tooltip.
import { BadgeTooltip } from "@/components/ui/tooltips-shape"
<BadgeTooltip content="Compact chip">
<button>Hover me</button>
</BadgeTooltip>ai2 Shape tooltips: 5 styled variations on the token system
The ai2 Shape tooltips are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around shaped tooltip bubbles. 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 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 transitions are disabled and the bubble appears instantly.
What is in the ai2 Shape tooltips?
5 exports in one file: Bubble, Pill, Notch, Callout and Badge. 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 hovered or focused.
- Reduced-motion aware: Under prefers-reduced-motion, the 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 Shape 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.