Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Demo

import { IconButton } from '@immit/ui/icon-button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@immit/ui/tooltip'
import { Plus } from 'lucide-react'
 
export function TooltipDemo() {
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton variant="outline" aria-label="Add">
            <Plus />
          </IconButton>
        </TooltipTrigger>
        <TooltipContent arrow>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Sides

import { IconButton } from '@immit/ui/icon-button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@immit/ui/tooltip'
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'
 
export function TooltipSides() {
  return (
    <TooltipProvider delayDuration={200}>
      <div className="flex gap-2">
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton variant="outline" aria-label="Top Demo">
              <ChevronUp />
            </IconButton>
          </TooltipTrigger>
          <TooltipContent side="top">
            <p>side = top</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton variant="outline" aria-label="Right Demo">
              <ChevronRight />
            </IconButton>
          </TooltipTrigger>
          <TooltipContent side="right">
            <p>side = right</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton variant="outline" aria-label="Bottom Demo">
              <ChevronDown />
            </IconButton>
          </TooltipTrigger>
          <TooltipContent side="bottom">
            <p>side = bottom</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <IconButton variant="outline" aria-label="Left Demo">
              <ChevronLeft />
            </IconButton>
          </TooltipTrigger>
          <TooltipContent side="left">
            <p>side = left</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}