Etykietka CSS
Twórz podpowiedzi za pomocą CSS.
Demo: przykłady podpowiedzi
Podpowiedź jest często używana do określenia dodatkowych informacji o czymś, gdy użytkownik przesunie wskaźnik myszy nad element:
Podstawowa podpowiedź
Utwórz podpowiedź, która pojawia się, gdy użytkownik najedzie myszą na element:
Przykład
<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>
Przykład wyjaśniony
HTML: użyj elementu kontenera (takiego jak <div>) i dodaj do
"tooltip"niego klasę. Gdy użytkownik najedzie myszą na ten <div>, pokaże się tekst podpowiedzi.
Tekst podpowiedzi jest umieszczany wewnątrz elementu śródliniowego (takiego jak <span>) z class="tooltiptext".
CSS: klasa tooltipuse position:relative, która jest potrzebna do pozycjonowania tekstu podpowiedzi ( position:absolute).
Uwaga: zobacz poniższe przykłady, jak ustawić podpowiedź.
Klasa tooltiptextzawiera rzeczywisty tekst podpowiedzi. Domyślnie jest ukryty i będzie widoczny po najechaniu kursorem (patrz poniżej). Dodaliśmy również kilka podstawowych stylów: szerokość 120 pikseli, czarny kolor tła, biały kolor tekstu, wyśrodkowany tekst oraz 5 pikseli górne i dolne dopełnienie.
Właściwość CSS border-radiussłuży do dodawania zaokrąglonych rogów do tekstu podpowiedzi.
Selektor :hoversłuży do wyświetlania tekstu podpowiedzi, gdy użytkownik najedzie myszą na <div> za pomocą class="tooltip".
Podpowiedzi dotyczące pozycjonowania
W tym przykładzie podpowiedź jest umieszczona po prawej stronie ( left:105%) tekstu „unoszącego się” (<div>). Zwróć również uwagę, że top:-5pxsłuży do umieszczania go w środku elementu pojemnika. Używamy liczby 5 , ponieważ tekst podpowiedzi ma górne i dolne wypełnienie o wielkości 5 pikseli. Jeśli zwiększysz jego dopełnienie, zwiększ również wartość topwłaściwości, aby upewnić się, że pozostanie w środku (jeśli tego chcesz). To samo dotyczy sytuacji, gdy chcesz umieścić podpowiedź po lewej stronie.
Prawy podpowiedź
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Wynik:
Lewa etykietka
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Wynik:
Jeśli chcesz, aby podpowiedź pojawiała się na górze lub na dole, zobacz przykłady poniżej. Zauważ, że używamy margin-leftwłaściwości o wartości minus 60 pikseli. Ma to na celu wyśrodkowanie podpowiedzi nad/pod tekstem do najechania. Jest ustawiony na połowę szerokości podpowiedzi (120/2 = 60).
Górna podpowiedź
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Wynik:
Podpowiedź na dole
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Wynik:
Strzałki podpowiedzi
Aby utworzyć strzałkę, która powinna pojawić się z określonej strony podpowiedzi, dodaj „pustą” zawartość po podpowiedzi, z klasą pseudoelementu ::afterwraz z content
właściwością. Sama strzałka jest tworzona za pomocą obramowań. Dzięki temu podpowiedź będzie wyglądać jak dymek.
Ten przykład pokazuje, jak dodać strzałkę na dole podpowiedzi:
Strzałka dolna
.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;
}
Wynik:
Przykład wyjaśniony
Umieść strzałkę wewnątrz podpowiedzi: top: 100%spowoduje umieszczenie strzałki na dole podpowiedzi. left: 50%wyśrodkuje strzałkę.
Uwaga: Właściwość border-widthokreśla rozmiar strzałki. Jeśli to zmienisz, zmień również margin-leftwartość na tę samą. Dzięki temu strzałka będzie wyśrodkowana.
Służy do border-colorprzekształcania treści w strzałkę. Ustawiamy górną granicę na czarną, a resztę na przezroczystą. Gdyby wszystkie boki były czarne, otrzymalibyśmy czarne kwadratowe pudełko.
W tym przykładzie pokazano, jak dodać strzałkę na górze podpowiedzi. Zauważ, że tym razem ustawiamy kolor dolnej krawędzi:
Strzałka w górę
.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;
}
Wynik:
Ten przykład pokazuje, jak dodać strzałkę po lewej stronie podpowiedzi:
Strzałka w lewo
.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;
}
Wynik:
Ten przykład pokazuje, jak dodać strzałkę po prawej stronie podpowiedzi:
Prawa strzałka
.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;
}
Wynik:
Pojawianie się podpowiedzi (animacja)
Jeśli chcesz zniknąć w tekście podpowiedzi, gdy ma być on widoczny, możesz użyć transitionwłaściwości CSS razem z opacity
właściwością i przejść od całkowitego niewidocznego do 100% widocznego w ciągu określonej liczby sekund (1 sekunda w naszym przykład):
Przykład
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}