easy-tooltips

Features

• No dependencies or frameworks required
• Works with mouse and touch events
• Customizable via CSS variables
• Smart positioning and viewport detection
• Smooth animations with no flicker
• Works in Vue, React, Svelte, and more

Basic Usage

Simply add the data-tooltip attribute to any element:

<button data-tooltip="Click to save your changes">Save</button>
<span data-tooltip="This field is required">username</span>
<div data-tooltip="Multi-line tooltips&#10;are supported">Info</div>

Custom HTML

Use data-tooltip-src to pull content from another element:

<button data-tooltip-src="#tip-shipping">Shipping Info</button>
<template id="tip-shipping">
  <strong>Free shipping</strong> on orders over £50<br>
  Delivered in 2-4 working days
</template>

<button class="btn btn-success" data-tooltip-src="next">Ingredients</button>
<div style="display: none;">
  <ul><li>Oats</li><li>Honey</li><li>Sea salt</li></ul>
</div>

Smart Positioning

Tooltips automatically adapt to screen boundaries. Hover over the buttons at the corners of your screen to see smart positioning in action:

Custom Colors

Style specific tooltips using data-tooltip-id and CSS variables:

<button data-tooltip="Saved!" data-tooltip-id="success-tooltip">Save</button>
<button data-tooltip="This cannot be undone!" data-tooltip-id="danger-tooltip">Delete</button>
<div data-tooltip="Get help" data-tooltip-id="info-tooltip">?</div>

<style>
  #success-tooltip {
    --tooltip-background: #f0fdf4;
    --tooltip-border-color: #27ae60;
    color: #27ae60;
  }
  
  #danger-tooltip {
    --tooltip-background: #fef2f2;
    --tooltip-border-color: #e74c3c;
    color: #e74c3c;
  }
  
  #info-tooltip {
    --tooltip-background: #faf5ff;
    --tooltip-border-color: #9b59b6;
    color: #9b59b6;
  }
</style>

Customization Variables

Fine-tune tooltips with CSS variables:

<style>
  :root {
    --tooltip-background: #fff;
    --tooltip-border-color: #aaa;
    --tooltip-border-size: 1px;
    --tooltip-max-width: 100%;
    --tooltip-arrow-size: 12px;
    --tooltip-arrow-radius: 0;
    --tooltip-animation-length: 0.15s;
    --tooltip-delay: 0.15s;
  }
</style>