Tooltip
Short hint on Radix Tooltip that appears on hover or focus, with an arrow.
"use client"
/*
* Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).
*
* MIT License
*
* Copyright (c) 2023 shadcn
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import * as React from "react"
import { cn } from "@/lib/utils"
import { Tooltip as TooltipPrimitive } from "radix-ui"
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
className
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }Installation
pnpm dlx shadcn@latest add @ward/tooltipnpx shadcn@latest add @ward/tooltipyarn dlx shadcn@latest add @ward/tooltipbunx --bun shadcn@latest add @ward/tooltipAdd the Ward registry to components.json once:
"registries": {
"@ward": "https://ward.so/r/{name}.json"
}Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/tooltip.json
Install the dependencies.
npm install radix-ui@1.6.7Copy each file from the Code tab into:
components/ui/tooltip.tsx
Update the import paths to match your project.
Usage
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild><Button variant="outline">Save</Button></TooltipTrigger>
<TooltipContent side="bottom">Save changes to this collection</TooltipContent>
</Tooltip>
</TooltipProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
TooltipProvider delayDuration | number | 0 | Milliseconds to wait after hover before a tooltip opens. Every Tooltip must sit inside a TooltipProvider, and Radix throws without one. |
open | boolean | - | Whether the tooltip is open, when the parent controls it. |
defaultOpen | boolean | false | Whether the tooltip starts open when it is uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the tooltip opens or closes. |
TooltipTrigger asChild | boolean | false | Use the child element as the trigger instead of rendering a button. |
TooltipContent side | "top" | "right" | "bottom" | "left" | "top" | Side of the trigger the tooltip opens on; it flips if there is no room. |
TooltipContent sideOffset | number | 0 | Gap in pixels between the trigger and the tooltip. |
TooltipContent align | "start" | "center" | "end" | "center" | Alignment against the trigger along the chosen side. |
Ward · Version 1.0.0 · Registry manifest