Hover-tooltip NPM

Hover Tooltip 🎯

A lightweight, customizable React tooltip component featuring smooth animations, multiple themes, and flexible positioning. Built with Framer Motion and Tailwind CSS.

Features ✨

🎨 6 Beautiful Themes - Modern, Elegant, Frost, Neon, Soft, and Glass
📍 Smart Positioning - Automatic positioning with 4 placement options
🎬 Smooth Animations - 6 fluid animation styles powered by Framer Motion
📱 Mobile Ready - Responsive design that works across all devices
🌗 Dark Mode - Seamless integration with dark mode
🔧 Highly Customizable - Easy styling with CSS variables and class names
📦 Lightweight - Only peer dependencies required

Installation 📥

npm install hover-tooltip framer-motion

# or with yarn
yarn add hover-tooltip framer-motion

# or with pnpm
pnpm add hover-tooltip framer-motion

Quick Start 🚀

import Tooltip from "hover-tooltip";

function App() {
  return (
    <Tooltip text="Hello World!" position="top" theme="modern">
      <button>Hover me</button>
    </Tooltip>
  );
}

Examples 💡

Basic Usage

// Simple tooltip
<Tooltip text="Basic tooltip">
  <button>Hover me</button>
</Tooltip>

// With position
<Tooltip text="Bottom tooltip" position="bottom">
  <button>Hover me</button>
</Tooltip>

// With theme
<Tooltip text="Glass theme" theme="glass">
  <button>Hover me</button>
</Tooltip>

Advanced Usage

// Click trigger with persistence
<Tooltip
  text="Click-triggered tooltip"
  showOnClick
  persistent
  theme="neon"
>
  <button>Click me</button>
</Tooltip>

// Rich HTML content
<Tooltip
  text="<strong>Bold</strong> and <em>italic</em> text"
  rich
  theme="elegant"
>
  <button>Rich Content</button>
</Tooltip>

// Custom styling
<Tooltip
  text="Custom styled tooltip"
  className="my-custom-tooltip"
  animation="elastic"
>
  <button>Custom Style</button>
</Tooltip>

Props ⚙️

Prop	Type	Default	Description
text	string	required	Tooltip content
children	ReactNode	required	Trigger element
position	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Placement
theme	'modern' \| 'elegant' \| 'frost' \| 'neon' \| 'soft' \| 'glass'	'modern'	Visual theme
animation	'smooth' \| 'pop' \| 'shift' \| 'elastic' \| 'fade' \| 'scale'	'smooth'	Animation style
delay	number	0.1	Show delay (seconds)
duration	number	0.3	Animation duration
distance	number	8	Distance from trigger (px)
maxWidth	string	'250px'	Maximum width
arrow	boolean	true	Show/hide arrow
showOnClick	boolean	false	Click trigger
persistent	boolean	false	Stay visible until clicked outside
rich	boolean	false	Allow HTML content
className	string	''	Custom CSS classes
fontSize	'sm' \| 'base' \| 'lg'	'sm'	Text size

Themes 🎨

// Modern (Default)
<Tooltip theme="modern">Clean, dark theme</Tooltip>

// Elegant
<Tooltip theme="elegant">Light theme with glass effect</Tooltip>

// Frost
<Tooltip theme="frost">Frosted glass effect</Tooltip>

// Neon
<Tooltip theme="neon">Dark theme with neon borders</Tooltip>

// Soft
<Tooltip theme="soft">Subtle light theme</Tooltip>

// Glass
<Tooltip theme="glass">Modern blur effect</Tooltip>

Animations 🎬

// Smooth (Default)
<Tooltip animation="smooth">Spring animation</Tooltip>

// Pop
<Tooltip animation="pop">Scale and fade</Tooltip>

// Elastic
<Tooltip animation="elastic">Bouncy spring</Tooltip>

// Fade
<Tooltip animation="fade">Simple fade</Tooltip>

// Scale
<Tooltip animation="scale">Smooth scaling</Tooltip>

// Shift
<Tooltip animation="shift">Directional slide</Tooltip>

Styling 🎯

Custom CSS

.my-custom-tooltip {
  --tooltip-bg: #2563eb;
  --tooltip-text: #ffffff;
  --tooltip-border-radius: 8px;
  --tooltip-arrow-size: 8px;
}

Dark Mode

// Automatically adapts to dark mode
<Tooltip theme="elegant">
  <button>Dark mode ready</button>
</Tooltip>

TypeScript Support 📘

import Tooltip from "hover-tooltip";
import type { TooltipProps } from "hover-tooltip";

const MyComponent: React.FC = () => {
  return (
    <Tooltip text="TypeScript enabled" position="top" theme="modern">
      <button>Typed Props</button>
    </Tooltip>
  );
};

Troubleshooting 🔧

Common Issues

Tooltip not showing
- Verify framer-motion installation
- Check tooltip text prop
- Look for z-index conflicts
Animation issues
- Confirm framer-motion compatibility
- Check for transform conflicts
Styling problems
- Verify Tailwind CSS setup
- Check CSS specificity
- Inspect custom theme variables