Tooltips maken met HTML en CSS

Tooltips zijn kleine tekst ballonnetjes die verschijnen zodra je met de muis over een object op een website zweeft.

Je zou bijvoorbeeld een tooltip voor een afbeelding kunnen maken met daarin wat informatieve tekst die verschijnt zodra de muis boven de afbeelding zweeft.

Plugins voor tooltips

Er zijn voor systemen als Joomla en Wordpress wel plugins te vinden die je kunt gebruiken om tooltips te maken op je website. Zo heb ik voor Joomla al eens een video over tooltips gemaakt.

Echter, het nadeel van plugins is dat je alle geïnstalleerde extensies ook moet beheren en updaten. Het zou dus mooi zijn als je ook zonder extensies gebruik zou kunnen maken van tooltips.

Tooltips maken met HTML en CSS

Gelukkig is het ook mogelijk om tooltips te maken zonder gebruik van plugins. Je kunt ze namelijk vrij eenvoudig maken met HTML en CSS.

In de onderstaande video laat ik je zien hoe je dit doet:

Hieronder zie je de HTML en CSS code die ik in de video gebruik:

De HTML code:

<div class="info">
<img src="/plaatje.jpg" alt="stad bij water">
<span class="infotext">Dit is de tekst die verschijnt in de tooltip</span>
</div>

De CSS code:

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

.infotext {
background-color:#000;
color:#fff;
border:solid 1px #ff6600;
text-align:center;
padding:10px;
border-radius:10px;
box-shadow: 2px 2px 2px #333;
position:absolute;
left:620px;
top:250px;
visibility:hidden;
}

.info:hover .infotext {
visibility:visible;
}

De tooltips voorzien van pijltjes

Om van de tooltip nu echt een tekstballon te maken, zou je eigenlijk nog pijltjes moeten toevoegen. Hier zie je een afbeelding van wat ik bedoel:

tooltip met pijl

Voor het maken van een pijltje moet je nog een klein stukje CSS code toevoegen.

Pijltje links

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

Pijltje rechts

.info .infotext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000;
}

Pijltje boven

.info .infotext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #000 transparent;
}

Pijltje onder

.info .infotext::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}

In de video en in de code die bij de video hoort, zag je dat ik een oranje randje om de tooltip heen zette. Wanneer je pijltjes toevoegt aan je tooltips, dan is het mooier om dat oranje randje te verwijderen.

Uiteraard kun je via de CSS code nog meer zaken regelen voor de tooltips. Je kunt bijvoorbeeld breedte en hoogte instellen, andere lettertypes en andere kleuren, wat je zelf maar wilt.

Voor de weergave op mobiele schermen zou je nog styling kunnen regelen met behulp van media queries.

Ik wens je heel veel succes toe bij het maken van tooltips op je website. Mocht je dit artikel nou waarderen, vergeet dan niet om het te delen via de social media knoppen hierboven.

You have no rights to post comments