easy-tooltips

Features

• No dependencies or frameworks required
• Works with mouse, touch, and keyboard focus
• Customizable via CSS variables
• Smart positioning and viewport detection
• Smooth animations with smart skip-delay between adjacent tooltips
• Anchor to the trigger element, the cursor, or where the user first hovered
• Plain text or arbitrary HTML content
• Seamless body + arrow drawn as a single SVG path
• Works in Vue, React, Svelte, and more

Demos

Tooltips in little UI scenes. The first is the default look; the rest combine variables with a little custom CSS. Hover or focus the elements in each scene.

Default Premium Bubbly Alert Glass Sketch Neon Photo

PRO

$12/mo

• Unlimited projects i
• Priority support i
• Advanced analytics i

Upgrade

A

Ava Chen

2h ago

Just shipped the new release! 🚀

👍 ❤️ 😂 🎉

Danger Zone

Delete account Delete

Reset settings Reset

Sign out everywhere Sign out

Never Gonna Give You Up

Rick Astley

Frontend

HTML

CSS

JavaScript

Backend

Node

Database

API

Active Users

24,891

+12.4%

Conversion

3.8%

−0.3%

Revenue

$48.2k

+5.1%

Avg. Session

4m 12s

+0.6%

Basic Usage

Simply add the data-easy-tooltip attribute to any element:

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

Custom HTML

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

<button data-easy-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-easy-tooltip-src="next">Ingredients</button>
<div style="display: none;">
  <ul><li>Oats</li><li>Honey</li><li>Sea salt</li></ul>
</div>

Dynamic Tooltips

Tooltips automatically update when the data-easy-tooltip attribute changes. Hover over the elements below to see live updates:

<button id="counter" data-easy-tooltip="Count: 0">Hover me</button>

<script>
  let count = 0
  setInterval(() => {
    document.getElementById("counter").dataset.easyTooltip = `Count: ${++count}`
  }, 1000)
</script>

Smart Positioning

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

Preferred Side

Tooltips show above by default. Use data-easy-tooltip-prefer to pick a side, falling back to the opposite side when there isn't room. Using left or right switches to horizontal mode:

<button data-easy-tooltip="I show above">Hover me</button>
<button data-easy-tooltip="I show below" data-easy-tooltip-prefer="below">Hover me</button>
<button data-easy-tooltip="I show on the left" data-easy-tooltip-prefer="left">Hover me</button>
<button data-easy-tooltip="I show on the right" data-easy-tooltip-prefer="right">Hover me</button>

Anchor Modes

By default a tooltip anchors to its trigger element. Use data-easy-tooltip-anchor to change the anchor point: cursor follows the cursor or touch point, pin freezes at the first hover or tap location. Keyboard focus always falls back to the element.

<div data-easy-tooltip="I follow your cursor" data-easy-tooltip-anchor="cursor">…</div>
<div data-easy-tooltip="I stay where you first hovered" data-easy-tooltip-anchor="pin">…</div>

Custom Colors

Style specific tooltips using data-easy-tooltip-class and CSS variables:

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

<style>
  .success-tooltip {
    --easy-tooltip-background-color: #f0fdf4;
    --easy-tooltip-border-color: #27ae60;
    --easy-tooltip-text-color: #27ae60;
  }

  .danger-tooltip {
    --easy-tooltip-background-color: #fef2f2;
    --easy-tooltip-border-color: #e74c3c;
    --easy-tooltip-text-color: #e74c3c;
  }

  .info-tooltip {
    --easy-tooltip-background-color: #faf5ff;
    --easy-tooltip-border-color: #9b59b6;
    --easy-tooltip-text-color: #9b59b6;
  }
</style>

Customization Variables

Fine-tune tooltips with CSS variables:

<style>
  :root {
    --easy-tooltip-background-color: #fff;     /* Background color */
    --easy-tooltip-text-color: #000;           /* Text color */
    --easy-tooltip-border-color: #aaa;         /* Border color */
    --easy-tooltip-border-size: 1px;           /* Border thickness */
    --easy-tooltip-border-radius: 4px;         /* Corner radius of the tooltip */
    --easy-tooltip-padding: 8px 12px;          /* Inner padding */
    --easy-tooltip-max-width: 100%;            /* Maximum tooltip width */
    --easy-tooltip-distance: 16px;             /* Distance from trigger element */
    --easy-tooltip-viewport-padding: 16px;     /* Minimum distance from screen edges */
    --easy-tooltip-arrow-size: 16px;           /* Arrow size (height defaults to width / 2; 0 to disable) */
    --easy-tooltip-arrow-size: 16px 8px;       /* Or specify arrow width and height separately */
    --easy-tooltip-arrow-edge-buffer-x: 12px;  /* Arrow gap from corner (for above or below tooltips) */
    --easy-tooltip-arrow-edge-buffer-y: 6px;   /* Arrow gap from corner (for left or right tooltips) */
    --easy-tooltip-arrow-radius: 0;            /* Border radius of the arrow tip */
    --easy-tooltip-animation-length: 0.15s;    /* Duration of fade animation */
    --easy-tooltip-animation-distance: 4px;    /* Distance the tooltip slides in */
    --easy-tooltip-delay: 0s;                  /* Base delay before the tooltip shows; always added */
    --easy-tooltip-inactive-delay: 0.15s;      /* Extra delay when no tooltip was recently active; drops to 0 once a tooltip is showing */
    --easy-tooltip-cooldown: 0.15s;            /* How long after the last tooltip closes before the inactive-delay applies again */
  }
</style>