Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Tooltip

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Tooltips zijn een kleine informatievensters die verschijnen bij hover of focus van een element. Ze geven extra informatie zonder je interface vol te proppen.

Gebruik een tooltip:

  • Voor korte hulpteksten bij formuliervelden
  • Om icoontjes uit te leggen
  • Bij afkortingen of technische termen

Een goede tooltip:

  • Blijft staan als je eroverheen hovert
  • Verdwijnt niet vanzelf
  • Kan worden verborgen met Escape

Opbouw

  • Koppel de beschrijving met aria-describedby, gebruik het ID van de tooltip
  • Geef de container van de tooltip de rol tooltip (role="tooltip")

Voorbeeld tooltip

HTML 
<!-- Tooltip code -->
<div class="tooltip-container">
  <button id="help-button" aria-describedby="help-tooltip">
    Help
  </button>
  <div class="tooltip" role="tooltip" id="help-tooltip" aria-hidden="true">
    Extra informatie
  </div>
</div>
CSS 
/* Tooltip stijlen */
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 5px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: black;
}

.tooltip.show {
  opacity: 1;
  visibility: visible;
}
JavaScript 
class Tooltip {
  constructor() {
    this.button = document.getElementById('help-button');
    this.tooltip = document.getElementById('help-tooltip');
    this.showTimeout = null;
    this.hideTimeout = null;
    this.isTouch = 'ontouchstart' in window;

    if(this.button && this.tooltip) {
      this.init();
    }
  }

  init() {
    // ARIA setup voor toegankelijkheid
    this.button.setAttribute('aria-describedby', this.tooltip.id);

    if(!this.isTouch) {
      this.button.addEventListener('mouseenter', () => this.show());
      this.button.addEventListener('mouseleave', () => this.hide());
      this.tooltip.addEventListener('mouseenter', () => clearTimeout(this.hideTimeout));
      this.tooltip.addEventListener('mouseleave', () => this.hide());
    }

    this.button.addEventListener('focus', () => this.show());
    this.button.addEventListener('blur', () => this.hide());

    if(this.isTouch) {
      this.button.addEventListener('click', (e) => {
        e.preventDefault();
        this.tooltip.classList.contains('show') ? this.hide() : this.show(0);
      });
    }

    document.addEventListener('keydown', (e) => {
      if(e.key === 'Escape' && this.tooltip.classList.contains('show')) {
        this.hide();
        this.button.focus();
      }
    });
  }

  show(delay = 500) {
    clearTimeout(this.hideTimeout);
    this.showTimeout = setTimeout(() => {
      this.tooltip.classList.add('show');
      this.tooltip.setAttribute('aria-hidden', 'false');
    }, delay);
  }

  hide() {
    clearTimeout(this.showTimeout);
    this.hideTimeout = setTimeout(() => {
      this.tooltip.classList.remove('show');
      this.tooltip.setAttribute('aria-hidden', 'true');
    }, 100);
  }
}

new Tooltip();

Toetsenbord

  • Escape:
    • Bij een uitgevouwen tooltip: sluit de tooltip

Beoordeling

Component

  • (4.1.2) De tooltip container moet de rol tooltip hebben (role="tooltip")
  • (1.3.1) Het element met tooltip moet aria-describedby hebben met het ID van de bijbehorende tooltip

Bronnen