QuestionLabel — HTML & CSS

A small “?” help icon with a hover/focus tooltip (.UIql). The CSS tooltip works on its own; the JS helper adds viewport-aware auto-flipping so a bubble near an edge opens inward (and below, if there's no room above) instead of overflowing.

Wiring up the auto-flip in JS is on the JavaScript page.

Live example

Theme:

Hover or focus the “?” icons — the last one opens on click only:

Password Use at least 8 characters, including a number. API key You can use HTML and a link — the bubble flips to stay on screen. Click only With UIql--click this opens on click, not hover. Click away to close.

Markup

The icon is a .UIql element with a .UIql__text bubble inside. It inherits the surrounding component's theme, so it works anywhere — next to a label, inside a SpinBox, etc. The bubble may contain HTML, including links:

<span>
  Password
  <span class="UIql" tabindex="0" aria-label="Help">
    <span class="UIql__text" role="tooltip">
      Use at least 8 characters, including a number.
    </span>
  </span>
</span>

Minimal markup

Just the icon and its bubble — drop the surrounding label text:

<span class="UIql" tabindex="0" aria-label="Help">
  <span class="UIql__text" role="tooltip">Short hint.</span>
</span>

Click to open

By default the bubble opens on hover or focus. Add UIql--click to drop the hover trigger so it opens only on click — clicking the icon focuses it (which opens the bubble), and clicking away closes it. Pure CSS, no JS option needed; edge-flipping, links and animation all behave the same.

<span class="UIql UIql--click" tabindex="0" aria-label="Help">
  <span class="UIql__text" role="tooltip">Opens only on click.</span>
</span>

Alignment modifiers

Set the open direction manually with these classes — the JS helper just toggles them for you based on available space:

Class	Effect
UIql--left	open to the left
UIql--right	open to the right
UIql--down	open below the icon
UIql--click	open on click only (no hover)