heyySwap

Installation

pnpm dlx rareui add liquid-tooltip

Usage

1

Basic Usage

Wrap any element with the tooltip component.

Example

import { LiquidTooltip } from '@/components/ui/liquid-tooltip';

export default function App() {
  return (
    <LiquidTooltip text="I'm Fluid!">
      <button>Hover Me</button>
    </LiquidTooltip>
  );
}

2

Placements

Supports top, bottom, left, and right positioning.

Example

<LiquidTooltip text="Left Side" placement="left">
  <div className="box">Target</div>
</LiquidTooltip>

Features

Seamlessly integrated and optimized for high-performance React applications.

Props

Prop	Type	Default	Description
`text`	`string`	-	Tooltip content text.
`placement`	`"top" \| "bottom" \| "left" \| "right"`	"top"	Direction where tooltip appears.
`className`	`string`	-	Wrapper class names.
`popupClassName`	`string`	-	Class names for the tooltip bubble itself.