@metadiv-studio/tooltip

A lightweight and customizable tooltip component for React applications, built with TypeScript and Tailwind CSS. This package provides a simple yet powerful tooltip component that can be easily integrated into any React project.

Installation

Install the package using npm:

npm install @metadiv-studio/tooltip

Tailwind CSS Configuration

Important: To use this package's Tailwind CSS styles, you must add the following path to your tailwind.config.js or tailwind.config.ts file:

// tailwind.config.js
module.exports = {
  content: [
    // ... other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

This ensures that Tailwind can scan the package's components and include the necessary CSS classes in your final build.

Usage

Basic Import

import { Tooltip } from '@metadiv-studio/tooltip';

Component Props

The Tooltip component accepts the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | Required | The text content to display in the tooltip | | trigger | React.ReactNode | Required | The element that triggers the tooltip when hovered | | delayDuration | number | 0 | Delay in milliseconds before showing the tooltip |

Examples

Basic Tooltip

import { Tooltip } from '@metadiv-studio/tooltip';
import { Button } from '@metadiv-studio/button';

function App() {
  return (
    <Tooltip 
      content="This is a basic tooltip" 
      trigger={
        <Button variant="outline">
          Hover me
        </Button>
      }
    />
  );
}

Tooltip with Custom Delay

import { Tooltip } from '@metadiv-studio/tooltip';
import { Button } from '@metadiv-studio/button';

function App() {
  return (
    <Tooltip 
      delayDuration={2000}
      content="This tooltip has a 2 second delay" 
      trigger={
        <Button variant="outline">
          Long delay tooltip
        </Button>
      }
    />
  );
}

Tooltip with Different Trigger Elements

import { Tooltip } from '@metadiv-studio/tooltip';

function App() {
  return (
    <div className="space-x-4">
      {/* Button trigger */}
      <Tooltip 
        content="Button tooltip" 
        trigger={<button className="px-4 py-2 bg-blue-500 text-white rounded">Button</button>}
      />
      
      {/* Div trigger */}
      <Tooltip 
        content="Div tooltip" 
        trigger={
          <div className="p-4 border rounded-lg cursor-pointer">
            Hover this div
          </div>
        }
      />
      
      {/* Span trigger */}
      <Tooltip 
        content="Span tooltip" 
        trigger={
          <span className="px-3 py-1 bg-gray-100 rounded-full cursor-pointer">
            Hover this span
          </span>
        }
      />
    </div>
  );
}

Tooltip with Complex Children

import { Tooltip } from '@metadiv-studio/tooltip';
import { Info } from 'lucide-react';

function App() {
  return (
    <Tooltip 
      content="This tooltip works with complex nested elements" 
      trigger={
        <div className="flex items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
          <Info className="h-5 w-5 text-blue-500" />
          <div>
            <p className="font-medium">Complex Element</p>
            <p className="text-sm text-gray-600">With multiple children</p>
          </div>
        </div>
      }
    />
  );
}

Multiple Tooltips with Different Delays

import { Tooltip } from '@metadiv-studio/tooltip';
import { Button } from '@metadiv-studio/button';

function App() {
  return (
    <div className="space-x-4">
      <Tooltip 
        content="Default delay (0ms)" 
        trigger={<Button variant="outline">Default</Button>}
      />
      
      <Tooltip 
        delayDuration={500}
        content="500ms delay" 
        trigger={<Button variant="outline">500ms</Button>}
      />
      
      <Tooltip 
        delayDuration={1000}
        content="1 second delay" 
        trigger={<Button variant="outline">1s</Button>}
      />
      
      <Tooltip 
        delayDuration={2000}
        content="2 second delay" 
        trigger={<Button variant="outline">2s</Button>}
      />
    </div>
  );
}

Props Guidelines

content (Required)

• Type: string
• Description: The text content displayed in the tooltip
• Usage: Keep content concise and informative. Avoid very long text as it may not display well on smaller screens.
• Example: "Click to save your changes"

trigger (Required)

• Type: React.ReactNode
• Description: The element that triggers the tooltip when hovered
• Usage: Can be any React element (button, div, span, etc.). The element should be interactive or have a cursor pointer style for better UX.
• Example: <Button>Save</Button> or <div className="cursor-pointer">Hover me</div>

delayDuration (Optional)

• Type: number
• Default: 0
• Description: Delay in milliseconds before showing the tooltip
• Usage: Use delays to prevent tooltips from appearing too quickly during mouse movement. Common values: 0-500ms for immediate feedback, 1000-2000ms for less intrusive tooltips.
• Example: 500 (half second delay)

License

UNLICENSED - All Rights Reserved

Copyright (c) 2025 Metadiv Studio & Lab

THE CONTENTS OF THIS PROJECT ARE PROPRIETARY AND CONFIDENTIAL. UNAUTHORIZED COPYING, TRANSFERRING OR REPRODUCTION OF THE CONTENTS OF THIS PROJECT, VIA ANY MEDIUM IS STRICTLY PROHIBITED.

The receipt or possession of the source code and/or any parts thereof does not convey or imply any right to use them for any purpose other than the purpose for which they were provided to you.

The software is provided "AS IS", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.