Animate UI

Tooltip

A tooltip is a small box that appears when hovering over an element.

Made by imskyleen
Edit on GitHub
Open in
Docs
Lorem
Guide
Repo

Installation

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip</p>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>And me</TooltipTrigger>
    <TooltipContent>
      <TooltipArrow />
      <p>Tooltip with arrow</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

TooltipProvider

PropTypeDefault
children
React.ReactNode
-
openDelay?
number
700
closeDelay?
number
300
transition?
Transition
{ type: "spring", stiffness: 300, damping: 35 }

Tooltip

PropTypeDefault
children
React.ReactNode
-
side?
Side
top
sideOffset?
number
0
align?
Align
center
alignOffset?
number
0

TooltipTrigger

PropTypeDefault
asChild?
boolean
false
...props?
HTMLMotionProps<"div">
-

TooltipContent

PropTypeDefault
asChild?
boolean
false
...props?
HTMLMotionProps<"div">
-

TooltipArrow

PropTypeDefault
withTransition?
boolean
true
...props?
React.ComponentProps<"svg">
-

Built by Skyleen. The source code is available on GitHub.