CSS værktøjestip
- Forrige side CSS animation
- Næste side CSS billedstil
Opret værktøjslinjer (Tooltip) ved hjælp af CSS.
Demonstration: Værktøjslinje
Eksempel
Når brugeren flytter musepeksen over et element, bruges værktøjslinjen ofte til at give yderligere information om indhold:
Basisværktøjslinje
Opret en værktøjslinje, der vises, når musepeksen føres over et element:
Eksempel
<style>
/* Værktøjslinjekontainer */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Hvis der skal vises en punkteret linje under den højdestøttede tekst */
}
/* Værktøjslinjetekst */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Positionér værktøjslinjetekst - se eksempler nedenfor */
position: absolute;
z-index: 1;
}
/* Vis viser værktøjslinjetekst, når musepeksen holdes over værktøjslinjekontaineren */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Example explanation
HTML:
Brug containerelementet (f.eks. <div>) og tilføj "tooltip" klassen. Når brugeren hæver musen på dette <div>, vises værktøjslinjeteksten.
Værktøjslinjeteksten findes i class="tooltiptext" indlejrede elementer (som <span>).
CSS:
tooltip Klassen bruger position:relative，bruges til at placere værktøjslinjeteksten (position:absolute）。Bemærk: Se eksemplet nedenfor for, hvordan du kan placere værktøjslinjen.
tooltiptext Klassen gemmer den faktiske værktøjslinjetekst. Som standard er den skjult og vises, når musen hæves (se nedenfor). Vi har også tilføjet nogle grundlæggende stilarter: 120 pixels bredde, sort baggrund, hvid tekst, tekst centreret samt 5px øvre og nedre indvendige kantlinjer (padding).
CSS border-radius Egenskaben bruges til at tilføje runde kanter til værktøjslinjeteksten.
Når brugeren flytter musen til class="tooltip" <div>-et,:hover Vælger, der bruges til at vise værktøjslinjeteksten.
Positioner værktøjslinjen
I dette eksempel er værktøjslinjen placeret på højre side af 'hover'-teksten (<div>)left:105%）。Desuden bemærk:top:-5px Bruges til at placere værktøjslinjen i midten af dens containerelement. Vi bruger tallet 5, fordi værktøjslinjens øvre og nedre indvendige kantlinjer er 5px. Hvis du øger dens kantlinjer, skal du også øge top Værdien af egenskaben, for at sikre, at den forbliver centreret. Hvis du vil have værktøjslinjen på venstre side, gælder det samme.
Højre værktøjslinje
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Resultat:
Venstre værktøjslinje
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Resultat:
Hvis du ønsker, at værktøjslinjen skal være øverst eller nederst, se eksemplet nedenfor. Bemærk, at vi bruger en negativ 60 pixels bred kant (margin-left). Dette er for at centrere værktøjslinjen med den flytbare tekst. Værdien er halvdelen af værktøjslinjens bredde (120/2 = 60).
Topværktøjslinje
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Brug halvdelen af bredden (120/2 = 60) for at centrere værktøjslinjen */
}
Resultat:
Bundværktøjslinje
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Brug halvdelen af bredden (120/2 = 60) for at centrere værktøjslinjen */
}
Resultat:
Værktøjslinjepegn
Hvis du ønsker at oprette en pind med en værktøjslinje, der vises på værktøjslinjens angivne side, skal du tilføje 'tom' indhold efter værktøjslinjen og bruge en pseudoelementklasse ::after and content property. The arrow itself is created using the border. This makes the tooltip look like a bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom arrow
.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;
}
Resultat:
Example explanation
Position the arrow inside the tooltip:top: 100% Place the arrow at the bottom of the tooltip.left: 50% This will center the arrow.
Note:border-width The attribute specifies the size of the arrow. If you change this setting, also change margin-left Change the value to the same value. This will center the arrow.
border-color Used to convert content into an arrow. We set the top border to black and the rest to transparent. If all sides are black, the final result will be a black square box.
This example shows how to add an arrow to the top of the tooltip. Note that this time we set the bottom border color:
Top arrow
.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;
}
Resultat:
This example demonstrates how to add an arrow to the left of the tooltip:
Left arrow
.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;
}
Resultat:
This example demonstrates how to add an arrow to the right of the tooltip:
Right arrow
.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;
}
Resultat:
Fade ind værktøjestip (animation)
Hvis du ønsker at fade ind og ud i værktøjestip tekst, der skal vises, kan du bruge CSS transition egenskab med opacity Brug egenskaber sammen og ændr fra fuldstændig usynlig til 100% synlig inden for de angivne sekunder (i dette eksempel er det 1 sekund):
Eksempel
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Forrige side CSS animation
- Næste side CSS billedstil
