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 tooltip
npx sprawlify@latest add tooltip
yarn sprawlify@latest add tooltip
bunx --bun sprawlify@latest add tooltip

Install the following dependencies:


pnpm add @sprawlify/primitives @sprawlify/solid
npm install @sprawlify/primitives @sprawlify/solid
yarn add @sprawlify/primitives @sprawlify/solid
bun add @sprawlify/primitives @sprawlify/solid

Add the following files to your project:

tooltip.tsx

1import { Tooltip as TooltipPrimitive } from "@sprawlify/solid/tooltip";2import { cn } from "@/lib/utils";3import { Portal } from "solid-js/web";4import { splitProps, type ComponentProps } from "solid-js";56function TooltipProvider(props: ComponentProps<typeof TooltipPrimitive.RootProvider>) {7  return <TooltipPrimitive.RootProvider data-slot="tooltip-provider" {...props} />;8}910function Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {11  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;12}1314function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {15  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;16}1718function TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Content>) {19  const [local, others] = splitProps(props, ["class", "children"]);2021  return (22    <Portal>23      <TooltipPrimitive.Positioner>24        <TooltipPrimitive.Content25          data-slot="tooltip-content"26          class={cn(27            "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",28            local.class,29          )}30          {...others}31        >32          {local.children}33          <TooltipPrimitive.Arrow class="[--arrow-background:var(--foreground)] [--arrow-size:8px]">34            <TooltipPrimitive.ArrowTip class="rounded-xs" />35          </TooltipPrimitive.Arrow>36        </TooltipPrimitive.Content>37      </TooltipPrimitive.Positioner>38    </Portal>39  );40}4142export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };43

Update 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 { Save } from "lucide-solid";

On This Page

Installation Usage Examples Disabled Button Placement With Keyboard Shortcut

Get PRO

Need premium blocks and templates? Upgrade to PRO and get access.