Hoe maak je met CSS een tooltip?

Een tooltip is een aanwijzing bij bijvoorbeeld een formulier-element. Als je met je muis over het formulier-element gaat wordt een korte aanwijzing zichtbaar. In het onderstaande voorbeeld is de tooltip geplaatst bij een checkbox.

Voorbeeld:
Zet hier je aanwijzing

Om een tooltip te maken zet je om het formulier-element een <span> en daarbinnen een tweede <span>. De HTML-code:

<span class="tooltip">
  <input type="checkbox">
  <span class="tooltiptext">Zet hier je aanwijzing</span>
</span>

En dan de CSS. De positioning van de tooltip-container is relative, zodat de positioning van de tooltip-text absolute is ten opzichte van de tooltip-container.

.tooltip {
  position: relative; 
  display: inline-block;
}

Vervolgens maak je de tooltip-text op. Door de absolute positioning ten opzichte van de tooltip-container kan je de tooltip-text rechts van het formulier-element plaatsen.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 120%; /* de tooltip komt rechts van het formulier-element */
}

De tooltip-text krijgt een pijltje aan de linkerkant. De manier waarop je zo’n pijltje maakt heb ik in een eerdere post beschreven.

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; 
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #333 transparent transparent; 
}

Ten slotte gebruik je CSS om de tooltip-text te laten verschijnen wanneer je met je muis over het formulier-element beweegt.

.tooltip:hover .tooltiptext {
  visibility: visible;
}