Geplaatst op

Hoe maak je met CSS een vinkje?

Een rood vinkje achter een tekst maak je als volgt. In het voorbeeld zet ik achter het eerste list-item <li> met de class ‘vinkje’ een rood vinkje.

  • Eerste
  • Tweede

Om het vinkje absoluut te kunnen positioneren ten opzichte van het list-item, maken we de position van het list-item relative. We plaatsen het vinkje met het pseudo-element ::after achter de inhoud van het list-item. We geven de breedte en de hoogte verschillende waarden. Vervolgens maken we alleen de rechter- en de onderrand rood; de beide andere randen maken we transparant. Ten slotte draaien we het geheel 45 graden, zodat het met de punt naar beneden staat.

li.vinkje {position:relative;}
li.vinkje::after { 
  content: " ";
  position:absolute;
  top: 10px;
  width:7px;
  height:13px;
  margin-left:10px;
  border-width:3px;
  border-style:solid;
  border-color: transparent red red transparent;
  transform: rotate(45deg);
}
Geplaatst op

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;
}