Tooltip

Contextual helper text on hover or focus.

Import/Installation

import { Button, Tooltip } from "@lottiefiles/creator-plugins-ui";

Preview

Usage

<Tooltip content="This action applies your changes.">
  <Button variant="outline" size="sm">
    Hover me
  </Button>
</Tooltip>

Props

PropTypeDefaultRequiredDescription
contentReact.ReactNodeYesThe content to display in the tooltip.
childrenReact.ReactElementYesThe trigger element that shows the tooltip on hover.
side"top" | "right" | "bottom" | "left""top"NoThe preferred side of the trigger to render against when open.
sideOffsetnumber4NoThe distance in pixels from the trigger.
delayDurationnumber300NoThe duration from when the mouse enters the trigger until the tooltip opens.
defaultOpenbooleanfalseNoWhether the tooltip should be open by default.
openbooleanNoThe controlled open state of the tooltip.
onOpenChange(open: boolean) => voidNoEvent handler called when the open state changes.

Built on Base UI Tooltip. See their docs for primitive-level details. For full control, the library also exports TooltipProvider, TooltipRoot, TooltipTrigger, and TooltipContent.

Last updated: August 5, 2026 at 11:47 AMEdit this page