Tooltip

A tooltip HTML, built into your site with no plugin and no library. A short line of text that describes a button or link, shown on hover and on keyboard focus, hidden by Escape, and placed above, below or beside its trigger with a flip and a slide when the window has no room. role="tooltip" attached with aria-describedby; the Popover API’s top layer where the browser has it. Without JavaScript the text shows in brackets after the trigger, or as its title.

In a sentence

Orders placed before noon ship the same day, and arrive in . Unused items can go back under our returns policy.

Icon-only triggers

Standard delivery: $4.95
Next-day delivery: $9.95

Placement

Each has a preferred side. Near the edge of the window it flips to the other side and slides to stay on screen.

Hover, or press Tab to reach a trigger; Escape hides the tip.

A small explanation on a word or an info icon, there when someone points at it or tabs to it, and out of the way the rest of the time.

Also called

hover textinfo iconhint bubbleTippy.jsBootstrap tooltipElementor Hotspot tooltip

What it replaces

Page-builder tooltip add-ons and the tooltips of Elementor Pro’s Hotspot widget
Tippy.js, Popper and Bootstrap tooltips
title="…" attributes used as tooltips (mouse only, and never on a phone)

Good for

A term a visitor may not know, an info icon beside a price or a setting, an icon-only button that needs its name spelled out: one sentence that helps and can be skipped.

Not for

Anything with a link, a button or a form in it: that is a popover (a disclosure, or modal), because a tooltip vanishes as soon as focus moves and nothing inside it can be reached. Information people need to complete a task, such as a password rule or a form field’s format: show it as visible hint text. And a phone-first page that leans on them: on touch they need a tap to see.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

The trigger is a real <button type="button"> (or a link with `href`) whose aria-describedby names the role="tooltip" element, so a screen reader reads the text with the trigger whether or not the tip is showing.
It shows on keyboard focus as well as on hover, never on hover only. Escape hides it without moving focus or the pointer; the pointer can move onto the tip without losing it; it stays until pointer and focus have both left (WCAG 1.4.13). One shows at a time.
On touch, a tap on a button trigger shows it and a second tap, or a tap elsewhere, hides it.
An icon-only trigger is named by `label`, its icon is aria-hidden, and it is at least 44 × 44 px.
The tip holds plain text only: markup is refused when the site is built, so nothing interactive can end up where focus cannot reach it.
Without JavaScript the text is in the page, in brackets after the trigger, or as the trigger’s title with `inline={false}`.
prefers-reduced-motion: no fade.

Where it's live

superherotech.ai: /elements/tooltip/ (demo)

How to ask for it

“The tooltip on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

More in Feedback & states

See them all working

Notice
Say what just happened, or what needs attention, right where it applies, in a color that says how much it matters.
Toast
A quiet “Saved” or “Link copied” in the corner that confirms the click and gets out of the way, with an Undo when one is needed.
Loading
Show people the page heard them: a spinner where something is working, gray shapes where content is on its way, and a form that cannot be clicked twice while it saves.
Stepper
Show people where they are in a checkout or a sign-up, how far they have come and what is left, on a laptop or a phone.