Tooltip

Overview

The Tooltip component provides additional information when users hover over or focus on an element. Built with Radix UI and Framer Motion, it supports various animations, themes, and appearance styles.

Preview

Preview

Code

import { Tooltip } from './components/ui';

function TooltipDemo() {
  return (
    <Tooltip content="This is a tooltip">
      <button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
        Hover me
      </button>
    </Tooltip>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add tooltip

yarn

yarn @mindfiredigital/ignix-ui add tooltip

pnpm

pnpm @mindfiredigital/ignix-ui add tooltip

Usage

import { Tooltip } from './components/ui';

function MyComponent() {
  return (
    <Tooltip content="Additional information">
      <button>Hover me</button>
    </Tooltip>
  );
}

Features

Preview

Code

<Tooltip
  content="This is a tooltip"
  animation="fade"
  bg="dark"
  rounded="sm"
>
  <button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
    Hover me
  </button>
</Tooltip>