Tooltip

The Tooltip component displays an interactive tooltip that can contain multiple icons with labels. It supports different sizes and customizable styles.

Installation

Ensure you have Lucide React installed for icons:

npm install lucide-react

Usage

Basic Tooltip

App.tsx

import { Tooltip } from "napui-kit";

export default function BasicTooltip() {
  return <Tooltip />;
}

Tooltip with Icons

App.tsx

import { Tooltip } from "napui-kit";
import { Check, AlertTriangle, X } from "lucide-react";

export default function TooltipWithIcons() {
  return (
    <Tooltip
      type="lg"
      icons={[
        { icon: <Check className="text-green-500" />, label: "Success" },
        {
          icon: <AlertTriangle className="text-yellow-500" />,
          label: "Warning",
        },
        { icon: <X className="text-red-500" />, label: "Error" },
      ]}
    />
  );
}

Sizes

The Tooltip component supports different sizes:

Size	Description
sm	Small tooltip icon
md	Medium tooltip icon (default)
lg	Large tooltip icon

Props

Prop	Type	Description
type	"sm" | "md" | "lg"	Defines the tooltip size
className	string	Additional CSS classes
icons	{ icon: JSX.Element; label: string }[]	List of icons with labels to display