🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Tooltip with Form Element

HTML Markup

<style>[role="tooltip"],
  .hidetooltip.hidetooltip.hidetooltip+[role="tooltip"] {
    visibility: hidden;
    position: absolute;
    top: 2rem;
    left: 5rem;
  }

  [aria-describedby]:hover,
  [aria-describedby]:focus {
    position: relative;
  }

  [aria-describedby]:hover+[role="tooltip"],
  [aria-describedby]:focus+[role="tooltip"] {
    visibility: visible;
  }</style>
<div class="tester">
    <label class="hoo-label" for="password">Password:</label>
    <input class="hoo-input-text" aria-describedby="passwordrules" id="password" type="password" />
    <div class="hoo-tooltip top-left" role="tooltip">
        <div class="hoo-tooltip-content">
            <p>Password Rules:</p>
            <ul>
                <li>Minimum of 8 characters</li>
                <li>Include at least one lowercase letter, one uppercase letter, one number and one special character</li>
                <li>Unique to this website</li>
            </ul>
        </div>
    </div>
</div>

Overview

This example demonstrates a practical implementation of a tooltip associated with a form input. The tooltip appears when the user hovers over or focuses on the password field, providing guidance on password requirements.

Usage

This pattern is particularly useful for:

Providing password requirements or validation rules
Explaining input format requirements
Offering help text for complex form fields
Providing contextual guidance without cluttering the form

Accessibility

This implementation follows accessibility best practices by:

Using aria-describedby to associate the tooltip with its input
Making the tooltip visible on both hover AND focus states
Using proper positioning to ensure the tooltip doesn’t obscure other form elements
Using the role="tooltip" attribute