Tooltip method 2: Additional information before the label and form control

Home | Full results | Github page

If the additional information is informative, but not critical, it could be presented to users as a separate element, before the relevant form control and label.

Example

Markup

<div class="form-container hint-parent">
  <div class="hint hint-positioned">
    <button class="tooltip">
      <span class="hidden">For the following input, the number</span>
      <span class="tooltip__content">
        Must be a whole number with no fractions, no decimal parts and no negatives.
      </span>
    </button>
  </div>
  <label for="hint6">
    <span class="label-content">
      Choose a number
    </span>
    <input class="form-input" id="hint6" type="text">
  </label>
</div>

Home | Full results | Github page