Tooltip

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

Demo

import { Button } from '@immit/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@immit/ui/tooltip'
import { Plus } from 'lucide-react'

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button variant="outline" size="icon" aria-label="Add">
              <Plus />
            </Button>
          }
        />
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Sides

import { Button } from '@immit/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@immit/ui/tooltip'
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'

export function TooltipSides() {
  return (
    <TooltipProvider>
      <div className="flex gap-2">
        <Tooltip>
          <TooltipTrigger
            render={
              <Button variant="outline" size="icon" aria-label="Top Demo">
                <ChevronUp />
              </Button>
            }
          />
          <TooltipContent side="top">
            <p>side = top</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button variant="outline" size="icon" aria-label="Right Demo">
                <ChevronRight />
              </Button>
            }
          />
          <TooltipContent side="right">
            <p>side = right</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button variant="outline" size="icon" aria-label="Bottom Demo">
                <ChevronDown />
              </Button>
            }
          />
          <TooltipContent side="bottom">
            <p>side = bottom</p>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button variant="outline" size="icon" aria-label="Left Demo">
                <ChevronLeft />
              </Button>
            }
          />
          <TooltipContent side="left">
            <p>side = left</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}