tolltop ▸

Tiny edge-aware tooltips. One attribute, one config call, no dependencies, no build. Works in all modern browsers.

Install

<!-- CDN: one script tag, injects its own CSS -->
<script src="https://cdn.jsdelivr.net/npm/tolltop/tolltop.js"></script>

<!-- or load the CSS yourself to theme it; the script then skips its own copy -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tolltop/tolltop.css">
<script src="https://cdn.jsdelivr.net/npm/tolltop/tolltop.js"></script>

# or via npm, for bundlers
npm install tolltop
import 'tolltop'

Then mark any element with the attribute. Tooltips show on hover and keyboard focus, and hide on Esc.

<button data-tooltip="Save your work">Save</button>

Configuration

Style and behavior are global. Call tolltop() once with any subset of options.

tolltop({
  bg: '#18181b',
  color: '#e4e4e7',
  radius: 6,          // number = px, or any CSS length
  fontSize: 12,
  padding: '6px 9px',
  maxWidth: 240,
  placement: 'auto',  // 'auto' | 'top' | 'bottom'
  gap: 10,            // gap to the trigger
  edge: 24            // min gap from each viewport side
});

Try it live, then hover any tooltip on the page:

Demo

Hover me

Focusable

Long text

Works on inline spans and dynamic nodes too.

Edge handling

The four pinned buttons in the page corners stay open-aware: corners near the top flip below, and corners near a side shift inward so the box never clips. The arrow keeps pointing at the trigger.

Tip: shrink the window narrow to watch the long tooltip wrap.

Options

Option	Example	Default
`bg`	'#1e3a5f'	#18181b
`color`	'#fff'	#e4e4e7
`radius`	10 or '10px'	6
`fontSize`	14 or '0.9rem'	12
`padding`	'8px 12px'	6px 9px
`maxWidth`	320	240
`placement`	'top' / 'bottom'	auto
`gap`	12	10
`edge`	16	24

The trigger attribute stays data-tooltip="text". Everything else is configured here.

◴ top-left

top-right ◴

◴ bottom-left

bottom-right ◴