Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
1import { Button } from "@/components/ui/button";2import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";34export default function Preview() {Installation
pnpm dlx sprawlify@latest add tooltipnpx sprawlify@latest add tooltipyarn sprawlify@latest add tooltipbunx --bun sprawlify@latest add tooltip
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { Tooltip as TooltipPrimitive } from "@sprawlify/react/tooltip";5import { cn } from "@/lib/utils";6import { Portal } from "@sprawlify/react/portal";78function TooltipProvider({ ...props }: React.ComponentProps<typeof TooltipPrimitive.RootProvider>) {9 return <TooltipPrimitive.RootProvider data-slot="tooltip-provider" {...props} />;10}1112function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {13 return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;14}1516function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {17 return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;18}1920function TooltipContent({21 className,22 children,23 ...props24}: React.ComponentProps<typeof TooltipPrimitive.Content>) {25 return (26 <Portal>27 <TooltipPrimitive.Positioner>28 <TooltipPrimitive.Content29 data-slot="tooltip-content"30 className={cn(31 "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",32 className,33 )}34 {...props}35 >36 {children}37 <TooltipPrimitive.Arrow className="[--arrow-background:var(--foreground)] [--arrow-size:8px]">38 <TooltipPrimitive.ArrowTip className="rounded-xs" />39 </TooltipPrimitive.Arrow>40 </TooltipPrimitive.Content>41 </TooltipPrimitive.Positioner>42 </Portal>43 );44}4546export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };47Update the import paths to match your project setup.
Usage
1import {
2 Tooltip,
3 TooltipContent,
4 TooltipTrigger,
5} from "@/components/ui/tooltip"1<Tooltip>
2 <TooltipTrigger>Hover</TooltipTrigger>
3 <TooltipContent>
4 <p>Add to library</p>
5 </TooltipContent>
6</Tooltip>Examples
Disabled Button
Show a tooltip on a disabled button by wrapping it with a span.
1import { Button } from "@/components/ui/button";2import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";34export default function Preview() {Placement
Use the positioning prop to change the placement of the tooltip.
1import { Button } from "@/components/ui/button";2import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";34export default function Preview() {With Keyboard Shortcut
1import { Button } from "@/components/ui/button";2import { Kbd } from "@/components/ui/kbd";3import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";4import { SaveIcon } from "lucide-react";Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.