css-tooltip

A simple, lightweight tooltip implemented using pure CSS with no JavaScript dependencies.

✨ Features

• 🎨 Pure CSS - No JavaScript required
• 📏 Dynamic Sizing - Tooltip size automatically adjusts based on parent element's font size
• ⚡ Lightweight - Only one CSS file, less than 2KB
• 🎯 Easy to Use - Just add a class and data attribute
• 🌈 Smooth Animation - Elegant fade-in/fade-out transitions
• 🎨 Customizable - Easy to customize colors via CSS variables

🚀 Quick Start

1. Include the CSS file

<link rel="stylesheet" href="tooltip.css">

2. Add the tooltip class and data attribute

<span class="tooltip" data-tooltip="This is your tooltip text!">
  Hover over me
</span>

That's it! The tooltip will appear when you hover over the element.

📖 Usage

Basic Example

<div class="tooltip" data-tooltip="Hello World!">
  Hover to see tooltip
</div>

Custom Font Sizes

The tooltip scales with the parent element's font size:

<!-- Small tooltip -->
<span class="tooltip" data-tooltip="Small" style="font-size: 12px;">
  Small text
</span>

<!-- Large tooltip -->
<span class="tooltip" data-tooltip="Large" style="font-size: 24px;">
  Large text
</span>

Custom Colors

You can customize the tooltip colors by overriding CSS variables:

<style>
  .my-tooltip {
    --tooltip-text-color: #000;
    --tooltip-bg-color: #ffeb3b;
  }
</style>

<span class="tooltip my-tooltip" data-tooltip="Custom styled!">
  Custom colors
</span>

🛠️ CSS Variables

Variable	Default	Description
--tooltip-text-color	#fff	Text color inside tooltip
--tooltip-bg-color	#333	Background color of tooltip

📁 Project Structure

css-tooltip/
├── tooltip.css      # Main CSS file
├── index.html       # Demo page
├── LICENSE          # Mozilla Public License 2.0
└── README.md        # This file

🌐 Browser Support

This project uses modern CSS features that are supported in all major browsers:

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)

🌍 Demo

See live demo.

📄 License

This project is licensed under the Mozilla Public License 2.0 - see the LICENSE file for details.