CSS -knopinfo
Maak tooltips met CSS.
Demo: Voorbeelden van knopinfo
Een tooltip wordt vaak gebruikt om extra informatie over iets te specificeren wanneer de gebruiker de muisaanwijzer over een element beweegt:
Basisknopinfo
Maak een tooltip die verschijnt wanneer de gebruiker de muis over een element beweegt:
Voorbeeld
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Voorbeeld uitgelegd
HTML: gebruik een containerelement (zoals <div>) en voeg de
"tooltip"klasse eraan toe. Als de gebruiker met de muis over deze <div> gaat, wordt de tooltip-tekst weergegeven.
De tooltip-tekst wordt in een inline-element (zoals <span>) geplaatst met class="tooltiptext".
CSS: de tooltipklasse use position:relative, die nodig is om de tooltip-tekst ( position:absolute) te positioneren.
Opmerking: Zie onderstaande voorbeelden voor het positioneren van de tooltip.
De tooltiptextklasse bevat de eigenlijke tooltip-tekst. Het is standaard verborgen en zal zichtbaar zijn bij de muisaanwijzer (zie hieronder). We hebben er ook enkele basisstijlen aan toegevoegd: 120px breedte, zwarte achtergrondkleur, witte tekstkleur, gecentreerde tekst en 5px boven- en ondervulling.
De CSS border-radius-eigenschap wordt gebruikt om afgeronde hoeken toe te voegen aan de tooltip-tekst.
De :hoverselector wordt gebruikt om de tooltip-tekst weer te geven wanneer de gebruiker de muis over de <div> beweegt met class="tooltip".
Tooltips voor positionering
In dit voorbeeld wordt de knopinfo rechts ( left:105%) van de "zwevende" tekst (<div>) geplaatst. Merk ook op dat het top:-5pxwordt gebruikt om het in het midden van het containerelement te plaatsen. We gebruiken het getal 5 omdat de tooltip-tekst een boven- en ondervulling van 5px heeft. Als u de opvulling verhoogt, verhoogt u ook de waarde van de topeigenschap om ervoor te zorgen dat deze in het midden blijft (als u dit wilt). Hetzelfde geldt als u de tooltip links wilt plaatsen.
Knopinfo rechts
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Resultaat:
Knopinfo links
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Resultaat:
Zie onderstaande voorbeelden als u wilt dat de knopinfo bovenaan of onderaan verschijnt. Merk op dat we de margin-lefteigenschap gebruiken met een waarde van min 60 pixels. Dit is om de knopinfo boven/onder de zwevende tekst te centreren. Het is ingesteld op de helft van de breedte van de tooltip (120/2 = 60).
Top-knopinfo
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultaat:
Knopinfo onderaan
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultaat:
Knopinfo-pijlen
Als u een pijl wilt maken die vanaf een specifieke kant van de knopinfo moet verschijnen, voegt u 'lege' inhoud toe na knopinfo, met de klasse pseudo-element ::aftersamen met de content
eigenschap. De pijl zelf wordt gemaakt met behulp van randen. Hierdoor ziet de tooltip eruit als een tekstballon.
Dit voorbeeld laat zien hoe u een pijl onder aan de knopinfo kunt toevoegen:
Onderste pijl
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Resultaat:
Voorbeeld uitgelegd
Plaats de pijl in de tooltip: top: 100%zal de pijl onderaan de tooltip plaatsen. left: 50%zal de pijl centreren.
Opmerking: De border-widtheigenschap specificeert de grootte van de pijl. Als u dit wijzigt, wijzigt u ook de margin-leftwaarde naar hetzelfde. Hierdoor blijft de pijl gecentreerd.
De border-colorwordt gebruikt om de inhoud om te zetten in een pijl. We zetten de bovenrand op zwart en de rest op transparant. Als alle zijden zwart waren, zou je eindigen met een zwarte vierkante doos.
Dit voorbeeld laat zien hoe u een pijl boven aan de knopinfo kunt toevoegen. Merk op dat we deze keer de onderste randkleur hebben ingesteld:
Bovenste pijl
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Resultaat:
Dit voorbeeld laat zien hoe u een pijl links van de knopinfo kunt toevoegen:
Linker pijl
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Resultaat:
Dit voorbeeld laat zien hoe u een pijl rechts van de knopinfo kunt toevoegen:
Rechter pijl
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Resultaat:
Knopinfo infaden (animatie)
Als u de tooltip-tekst wilt laten vervagen wanneer deze op het punt staat zichtbaar te worden, kunt u de CSS- transitioneigenschap samen met de opacity
eigenschap gebruiken en in een aantal gespecificeerde seconden (1 seconde in onze voorbeeld):
Voorbeeld
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}