Hint

Installation

npx shadcn@latest add https://www.uicart.io/registry/hint.json

Usage

import Hint from "@/components/ui/hint";

<Hint asChild content="This is a hint">
  <button>Hover me</button>
</Hint>

Examples

Without Animations

You can enable or disable the bounce effect by passing the isAnimating prop. By default, the bounce effect is enabled.

<Hint asChild content="This is a hint" isAnimating={false}>
  <button>Hover me</button>
</Hint>

Adjust Bounce Effect

You can adjust the stiffness of the bounce effect by passing the animationStiffness prop. The higher the value the more bouncy the effect will be.

<Hint asChild content="This is a hint" animationStiffness={100}>
  <button>Hover me</button>
</Hint>

Animation Entrance Direction

You can adjust the direction of the bounce effect by passing the animationFrom prop. By default, the bounce effect is from the top. You can set it to left, right, top, or bottom.

<Hint asChild content="This is a hint" animationFrom="left">
  <button>Hover me</button>
</Hint>

Disable The ToolTip

You can disable the tooltip by passing the enabled prop. By default, the tooltip is enabled.

<Hint asChild content="This is a hint" enabled={false}>
  <button>Hover me</button>
</Hint>

Delay The Hint

You can delay the hint by passing the delay prop. By default, the delay is 0.

<Hint asChild content="This is a hint" delay={1000}>
  <button>Hover me</button>
</Hint>