Tooltip method 1: Additional information before the form control, but inside label

Home | Full results | Github page

If the additional information is critical and needs to be programatically associated with the form control, it may be best placed inside the label, or associated via an aria-describedby attribute.

Example

Markup

<div class="form-container">
  <label for="hint4">
    <span class="label-content">
      Active customers
      <a href="#" class="tooltip" role="button">
        <span class="tooltip__content">
          <span class="hidden">is defined as </span>The maximum number of active customers across a given month.
        </span>
      </a>
    </span>
    <input class="form-input" id="hint4" type="text">
  </label>
</div>

Home | Full results | Github page