// Overlays

Tooltip

Display information on hover or focus.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/tooltip

// Usage

1import { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from "@/components/ui/tooltip";
2
3<Tooltip />

// Code

1"use client";
2
3import { Portal } from "@ark-ui/react/portal";
4import {
5  Tooltip as ArkTooltip,
6  useTooltipContext,
7} from "@ark-ui/react/tooltip";
8import type React from "react";
9import { cn } from "@/lib/utils";
10
11export const useTooltip = useTooltipContext;
12
13export const Tooltip = (
14  props: React.ComponentProps<typeof ArkTooltip.Root>
15) => {
16  const {
17    positioning = {
18      placement: "top",
19    },
20    lazyMount = true,
21    unmountOnExit = true,
22    closeDelay = 100,
23    openDelay = 0,
24    ...rest
25  } = props;
26
27  return (
28    <ArkTooltip.Root

// Dependencies

@ark-ui/react