Hoe een eenvoudige CSS3-tooltip te maken

Tooltips zijn een geweldige manier om uw gebruiker meer informatie te tonen door simpelweg over een afbeelding of tekst te zweven. Ze kunnen bijvoorbeeld worden gebruikt voor bijschriften voor afbeeldingen of langere beschrijvingen van koppelingen, of voor nuttige informatie die de gebruikerservaring van uw site zou verbeteren, zonder inbreuk te maken op het ontwerp.

Vandaag laat ik je zien hoe je een eenvoudige tooltip maakt met HTML en CSS om de title-tag van je hyperlinks te tonen.

Laten we beginnen met het maken van enkele eenvoudige markeringen voor de link. We moeten het een titel geven die de tooltip-inhoud is en een klasse toewijzen:

CSS3 Tooltip

De volgende stap is het maken van een aantal rudimentaire vormgeving voor onze tooltipklasse:

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

We tonen nu onze tooltip inline met onze link met behulp van relatieve positionering. Vervolgens willen we een afgeronde box maken om de body van de tooltip te vormen en deze zo plaatsen dat deze boven de link zweeft:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

We gebruiken de: hover selector die een element selecteert, in dit geval onze link, op mouseover en de: after selector, die inhoud invoegt na het geselecteerde element. We hebben een zwarte achtergrond met een dekking van 80% opgegeven en voor browsers die geen RGBA-kleuren ondersteunen, hebben we een donkergrijze achtergrond weergegeven.

Iets afgeronde hoeken worden gemaakt met behulp van het kenmerk border-radius en we hebben de tekstkleur op wit ingesteld. Ten slotte hebben we de tooltip-box aan de linkerkant van de link geplaatst en een kleine opvulling toegevoegd.

Naast de vormgeving en positionering hebben we de eigenschap content ingesteld:

content: attr(title);

Met deze eigenschap kunnen we de gewenste inhoud invoegen, die een tekenreeks, een mediabestand of een kenmerk van het element kan zijn. In dit geval gebruiken we het titelkenmerk van de link.

Wanneer u nu met uw muis over uw link beweegt, zou er een tooltip erboven moeten verschijnen met de tekst die u als uw linktitel hebt ingesteld. We hebben echter één probleem: de titelinformatie wordt twee keer getoond: een keer in de tooltip en een keer in de browser. Om dit te verhelpen, moeten we een kleine wijziging aanbrengen in onze HTML:

CSS3 Tooltip 

Wat we hier hebben gedaan, is de linktekst omwikkelen in een span-tag met een eigen titelkenmerk. Nu zal de browser de titel weergeven die is ingesteld in de span-tag wanneer de link is verplaatst.

Om te eindigen voegen we een pijl toe aan de onderkant van de tooltip, om het dat beetje extra vleugje stijl te geven. We doen dit door de: vóór selector en enkele randstijlen te gebruiken:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

We gebruiken hier enkele border hacks om het effect van een pijl te creëren: de randkleuren links en rechts instellen op transparant en de randbreedten regelen. We hebben ook de pijl gepositioneerd zodat deze op de onderkant van de tooltip-kader staat.

En daar heb je het, een eenvoudige tooltip met het title-tag van het element erboven. Je zou dit ook kunnen gebruiken voor alt-tags met afbeeldingen, of zelfs gewoon je eigen tekst in de CSS plaatsen om op te duiken waar je wilt.

U kunt een werkende demo hier .

Hoe bouwt u tooltips? Heb je deze techniek op een site gebruikt? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, hint afbeelding via Shutterstock.