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:

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.

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>

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