Tooltip

A floating information panel that appears when hovering or clicking on an element, providing additional context or help

Positions

Triggers

Custom Delays

With Icons

Form Labels with Help

Email Address

Long Content

In Cards

Feature 1

Some description text here.

Feature 2

More description content.

Tooltip Component

tsx

1import React, { useState, useRef, useEffect } from "react";
2import { cn } from "@/lib/cn";
3
4interface TooltipProps {
5  content: string;
6  position?: "top" | "bottom" | "left" | "right";
7  trigger?: "hover" | "click";
8  delay?: number;
9  children: React.ReactNode;
10  className?: string;