KbdTooltip() — ui Function Reference

Architecture documentation for the KbdTooltip() function in kbd-tooltip.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ KbdTooltip() — ui Function Reference

Dependency Diagram

graph TD
  a8625929_8e00_26d5_58e1_87da6db843db["KbdTooltip()"]
  d97f4e4c_d56d_1e28_771c_df5ff77e7077["kbd-tooltip.tsx"]
  a8625929_8e00_26d5_58e1_87da6db843db -->|defined in| d97f4e4c_d56d_1e28_771c_df5ff77e7077
  style a8625929_8e00_26d5_58e1_87da6db843db fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/kbd-tooltip.tsx lines 10–45

export default function KbdTooltip() {
  return (
    <div className="flex flex-wrap gap-4">
      <ButtonGroup>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Save
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Save Changes <Kbd>S</Kbd>
            </div>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Print
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Print Document{" "}
              <KbdGroup>
                <Kbd>Ctrl</Kbd>
                <Kbd>P</Kbd>
              </KbdGroup>
            </div>
          </TooltipContent>
        </Tooltip>
      </ButtonGroup>
    </div>
  )
}