Tooltip

Sides

Tooltips on all four sides, plus an explanation on a disabled action.

"use client"
import { DownloadSimple } from "@phosphor-icons/react"
import {

"use client"


import { DownloadSimple } from "@phosphor-icons/react"
import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from "@glinui/ui"


export function TooltipSidesExample() {
  return (
    <TooltipProvider delayDuration={100}>
      <div className="mx-auto flex flex-wrap items-center justify-center gap-3 py-8">
        {(["top", "right", "bottom", "left"] as const).map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger asChild><Button variant="outline" size="sm">{side}</Button></TooltipTrigger>
            <TooltipContent side={side}>{`Opens on the ${side}`}</TooltipContent>
          </Tooltip>
        ))}
        <Tooltip>
          <TooltipTrigger asChild><Button size="sm" disabled aria-label="Export, unavailable"><DownloadSimple aria-hidden="true" />Export</Button></TooltipTrigger>
          <TooltipContent>Export is unavailable on the free plan</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

Variants

Every look of the shared vocabulary: glinr (the default), plain (shadcn), solid, soft, outline, ghost, gradient and glass. Omit `variant` to follow the ambient design style. The default tooltip is a compact high-contrast pill that inverts per theme scope.

import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@glinui/ui"
const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const
export function Demo() {

import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <TooltipProvider delayDuration={0}>
      <div className="flex flex-wrap gap-2">
        {variants.map((variant) => (
          <Tooltip key={variant}>
            <TooltipTrigger asChild><Button size="sm" variant="outline">{variant}</Button></TooltipTrigger>
            <TooltipContent variant={variant}>{variant} tooltip</TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  )
}

Glass (opt-in)

variant="glass" is opt-in. It blurs and tints what sits behind the panel (with a readable opacity floor), so it needs a colourful or photographic backdrop: switch the stage backdrop to see it.

import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@glinui/ui"
export function Demo() {
  return (

import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip>
        <TooltipTrigger asChild><Button variant="outline">Hover me</Button></TooltipTrigger>
        <TooltipContent variant="glass">Frosted tooltip</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Custom Delay

Override the open delay per-tooltip by passing `delayDuration` to the `Tooltip` root. A delay of `0` opens instantly.

import { Button } from "@glinui/ui"
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"

export function TooltipDelayDemo() {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-4">
        <Tooltip delayDuration={0}>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Instant</Button>
          </TooltipTrigger>
          <TooltipContent>
            <p>Opens immediately (0 ms)</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip delayDuration={700}>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Delayed</Button>
          </TooltipTrigger>
          <TooltipContent>
            <p>Opens after 700 ms</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

Side Positioning

Use `side` on `TooltipContent` to anchor the hint above, below, left, or right of the trigger. The tooltip auto-adjusts to avoid viewport clipping.

import { Button } from "@glinui/ui"
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"

export function TooltipSideDemo() {
  return (
    <TooltipProvider>
      <div className="flex items-center justify-center gap-4">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Top</Button>
          </TooltipTrigger>
          <TooltipContent side="top">
            <p>Top tooltip</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Right</Button>
          </TooltipTrigger>
          <TooltipContent side="right">
            <p>Right tooltip</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Bottom</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">
            <p>Bottom tooltip</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">Left</Button>
          </TooltipTrigger>
          <TooltipContent side="left">
            <p>Left tooltip</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

Keyboard Interactions

ARIA Attributes

• `role="tooltip"`
• `aria-describedby` linking trigger to tooltip content

Affected properties