Tooltip

A tooltip is a small pop-up box that appears when a user hovers over an element.

Import

import { Tooltip } from "@aeonkit/react";

Usage

Default

Preview
Code

<Tooltip>
  <Tooltip.Trigger>
    <p className="flex flex-row gap-2 items-center text-slate-600 dark:text-slate-100">
      <LuLightbulb className="text-amber-500 dark:text-amber-400" size={24} />{" "}
      Hover over me for a bright idea 😆
    </p>
  </Tooltip.Trigger>
  <Tooltip.Content>
    Chia whatever prism tilde vibecession. Put a bird on it air plant DSA
    skateboard. Vaporware brunch iPhone, intelligentsia migas gluten-free
    pickled glossier.
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip>

Props

API Interface: TooltipProps

API Interface: TooltipTriggerProps

API Interface: TooltipArrowProps

API Interface: TooltipContentProps