Tooltip

import { Button, Hint } from 'ferry-ui'
import { Download, RefreshCw, Settings } from 'lucide-react'

export default function TooltipHero() {
  return (
    <>
      <Hint label="Refresh">
        <Button size="icon" icon={<RefreshCw />} aria-label="Refresh" />
      </Hint>
      <Hint label="Download CSV">
        <Button size="icon" icon={<Download />} aria-label="Download CSV" />
      </Hint>
      <Hint label="Settings">
        <Button size="icon" icon={<Settings />} aria-label="Settings" />
      </Hint>
    </>
  )
}

import { Button, Hint } from 'ferry-ui'

const SIDES = ['top', 'right', 'bottom', 'left'] as const

export default function TooltipSide() {
  return (
    <>
      {SIDES.map((side) => (
        <Hint key={side} label={`Tooltip on the ${side}`} side={side}>
          <Button>{side}</Button>
        </Hint>
      ))}
    </>
  )
}

import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ferry-ui'

export default function TooltipParts() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost" size="tiny">
          Updated 2 hours ago
        </Button>
      </TooltipTrigger>
      {/* The parts give access to the props of the content: `side`, `align`, `sideOffset`. */}
      <TooltipContent side="bottom" align="start">
        March 3, 2026 at 14:05
      </TooltipContent>
    </Tooltip>
  )
}

import * as React from 'react'
import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ferry-ui'
import { Archive } from 'lucide-react'

export default function TooltipControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <Button size="icon" icon={<Archive />} aria-label="Archive project" />
        </TooltipTrigger>
        <TooltipContent>Archive project</TooltipContent>
      </Tooltip>
      <span className="text-[13px] text-foreground-light">The tooltip is {open ? 'open' : 'closed'}.</span>
    </>
  )
}

import { Button, Hint } from 'ferry-ui'
import { Trash2 } from 'lucide-react'

export default function TooltipOnDisabledButton() {
  return (
    <Hint label="Only an admin of the workspace can delete a project">
      {/* A disabled button gets no hover and no focus: the span is the trigger. */}
      <span tabIndex={0} className="inline-flex rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <Button variant="destructive" icon={<Trash2 />} disabled>
          Delete project
        </Button>
      </span>
    </Hint>
  )
}

import { Hint } from 'ferry-ui'

const INVOICES = [
  { id: 'INV-2041', customer: 'Acme International Trading Company', amount: '$4,200.00' },
  { id: 'INV-2042', customer: 'Example Logistics and Supply Partners', amount: '$860.00' },
  { id: 'INV-2043', customer: 'Sample Health and Insurance Services', amount: '$12,940.50' },
]

export default function TooltipOnTruncatedText() {
  return (
    <ul className="w-80 max-w-full divide-y rounded-lg border bg-surface-100 text-[13px]">
      {INVOICES.map((invoice) => (
        <li key={invoice.id} className="flex items-center gap-3 px-3 py-2">
          <span className="shrink-0 font-mono text-xs text-foreground-lighter">{invoice.id}</span>
          <Hint label={invoice.customer}>
            {/* `tabIndex={0}` lets keyboard users get the tooltip. */}
            <span
              tabIndex={0}
              className="min-w-0 flex-1 truncate rounded-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {invoice.customer}
            </span>
          </Hint>
          <span className="tabular shrink-0 text-foreground-light">{invoice.amount}</span>
        </li>
      ))}
    </ul>
  )
}