Tooltipstandard
요소에 마우스를 올리거나 초점이 가면 옆에 짧은 설명을 띄우는 툴팁(tooltip)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Tooltip` 위에 서 있습니다. 눌러서 여는 내용에는 `popover` 를 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/tooltipDefault
tooltip-example.tsx
"use client"
import { Example, ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { Kbd } from "@/components/ui/kbd"import { Tooltip, TooltipContent, TooltipTrigger,} from "@/components/ui/tooltip"import { InfoIcon, SaveIcon } from "lucide-react"
export default function TooltipExample() { return ( <ExampleWrapper> <TooltipBasic /> <TooltipSides /> <TooltipWithIcon /> <TooltipLongContent /> <TooltipDisabled /> <TooltipWithKeyboard /> <TooltipOnLink /> <TooltipFormatted /> </ExampleWrapper> )}
function TooltipBasic() { return ( <Example title="Basic"> <Tooltip> <TooltipTrigger render={<Button variant="outline" className="w-fit" />}> Show Tooltip </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </Tooltip> </Example> )}
function TooltipSides() { return ( <Example title="Sides"> <div className="flex flex-wrap gap-2"> {( [ "inline-start", "left", "top", "bottom", "right", "inline-end", ] as const ).map((side) => ( <Tooltip key={side}> <TooltipTrigger render={<Button variant="outline" className="w-fit capitalize" />} > {side.replace("-", " ")} </TooltipTrigger> <TooltipContent side={side}> <p>Add to library</p> </TooltipContent> </Tooltip> ))} </div> </Example> )}
function TooltipWithIcon() { return ( <Example title="With Icon"> <Tooltip> <TooltipTrigger render={<Button variant="ghost" size="icon" />}> <InfoIcon /> <span className="sr-only">Info</span> </TooltipTrigger> <TooltipContent> <p>Additional information</p> </TooltipContent> </Tooltip> </Example> )}
function TooltipLongContent() { return ( <Example title="Long Content"> <Tooltip> <TooltipTrigger render={<Button variant="outline" className="w-fit" />}> Show Tooltip </TooltipTrigger> <TooltipContent> To learn more about how this works, check out the docs. If you have any questions, please reach out to us. </TooltipContent> </Tooltip> </Example> )}
function TooltipDisabled() { return ( <Example title="Disabled"> <Tooltip> <TooltipTrigger render={<span className="inline-block w-fit" />}> <Button variant="outline" disabled> Disabled </Button> </TooltipTrigger> <TooltipContent> <p>This feature is currently unavailable</p> </TooltipContent> </Tooltip> </Example> )}
function TooltipWithKeyboard() { return ( <Example title="With Keyboard Shortcut"> <Tooltip> <TooltipTrigger aria-label="Save" render={<Button variant="outline" size="icon-sm" />}> <SaveIcon /> </TooltipTrigger> <TooltipContent> Save Changes <Kbd>S</Kbd> </TooltipContent> </Tooltip> </Example> )}
function TooltipOnLink() { return ( <Example title="On Link"> <Tooltip> <TooltipTrigger render={ <a href="#" className="w-fit text-sm text-primary underline-offset-4 hover:underline" onClick={(e) => e.preventDefault()} /> } > Learn more </TooltipTrigger> <TooltipContent> <p>Click to read the documentation</p> </TooltipContent> </Tooltip> </Example> )}
function TooltipFormatted() { return ( <Example title="Formatted Content"> <Tooltip> <TooltipTrigger render={<Button variant="outline" className="w-fit" />}> Status </TooltipTrigger> <TooltipContent> <div className="flex flex-col gap-1"> <p className="font-semibold">Active</p> <p className="text-xs opacity-80">Last updated 2 hours ago</p> </div> </TooltipContent> </Tooltip> </Example> )}