Skip to main content

​
Overview

Liquid Tooltip wraps any element and renders a floating label driven by Framer Motion spring values. As the mouse moves across the trigger, the tooltip translates and rotates with spring physics, creating a fluid, organic wobble distinct from standard CSS transitions.

​
Installation

npx rareui@latest add liquid-tooltip
Or copy the component manually from components/rareui/LiquidTooltip.tsx into your project.

​
Usage

import { LiquidTooltip } from '@/components/rareui/LiquidTooltip';

export default function MyComponent() {
  return (
    <LiquidTooltip text="Hello world!">
      <button>Hover me</button>
    </LiquidTooltip>
  );
}

​
Props

​
text
string
The text content displayed inside the tooltip bubble. Required.
​
children
React.ReactNode
The trigger element the tooltip attaches to. Required.
​
placement
top | bottom | left | right
default:"top"
Position of the tooltip relative to the trigger element. Controls both the offset direction and the enter/exit animation axis.
​
className
string
Additional Tailwind or CSS classes applied to the outer wrapper <span>.
​
popupClassName
string
Additional classes applied directly to the tooltip popup <div>, useful for overriding background color or padding.

​
Examples

​
All four placements

import { LiquidTooltip } from '@/components/rareui/LiquidTooltip';

export default function PlacementDemo() {
  return (
    <div className="flex gap-8 items-center justify-center p-12">
      <LiquidTooltip text="Top" placement="top">
        <button className="px-4 py-2 rounded-md bg-amber-300">Top</button>
      </LiquidTooltip>

      <LiquidTooltip text="Bottom" placement="bottom">
        <button className="px-4 py-2 rounded-md bg-amber-300">Bottom</button>
      </LiquidTooltip>

      <LiquidTooltip text="Left" placement="left">
        <button className="px-4 py-2 rounded-md bg-amber-300">Left</button>
      </LiquidTooltip>

      <LiquidTooltip text="Right" placement="right">
        <button className="px-4 py-2 rounded-md bg-amber-300">Right</button>
      </LiquidTooltip>
    </div>
  );
}

​
Custom popup styling

<LiquidTooltip
  text="Custom style"
  placement="top"
  popupClassName="bg-violet-600 text-white"
>
  <span className="underline cursor-pointer">Hover this text</span>
</LiquidTooltip>

​
Tooltip on an icon button

<LiquidTooltip text="Delete item" placement="bottom">
  <button aria-label="Delete" className="p-2 rounded-full hover:bg-red-50">
    <TrashIcon className="w-5 h-5 text-red-500" />
  </button>
</LiquidTooltip>

​
Features

Liquid Spring Physics

Position and rotation are driven by Framer Motion spring values for an organic, fluid wobble.

Mouse Parallax Tracking

The tooltip translates along the trigger element in sync with mouse position for subtle depth.

Directional Awareness

Entry and exit animations adapt automatically based on the placement prop — no manual config needed.

Four Placements

Supports top, bottom, left, and right with correct arrow positioning for each.

Composable

Wraps any React.ReactNode — buttons, links, icons, or arbitrary elements.

Dark Mode

Default styles invert between neutral-900 and neutral-100 based on the active color scheme.

Build docs developers (and LLMs) love

Get started for freeTalk to us