CSS podpowiedzi
- Poprzednia strona CSS animacje
- Następna strona CSS stylizacja obrazów
Utwórz tooltip za pomocą CSS (Tooltip).
Przykład: tooltip
Przykład
Gdy użytkownik przenosi kursor nad elementem, tooltip jest zwykle używany do dostarczania dodatkowych informacji o zawartości:
Podstawowy tooltip
Utwórz tooltip, który jest wyświetlany, gdy użytkownik przenosi kursor nad elementem:
Przykład
<style>
/* Kontener tooltipa */
.tooltip {
position: względna;
display: inline-block;
border-bottom: 1px przerywana czarna; /* Jeśli chcemy wyświetlić przerywaną linię pod tekstem nawigacyjnym */
}
/* Tekst tooltipa */
.tooltip .tooltiptext {
widoczność: niewidoczny;
width: 120px;
background-color: czarny;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Umieszczenie tekstu tooltipa - zobacz poniższy przykład */
position: absolute;
z-index: 1;
}
/* Wyświetl tekst tooltipa, gdy kursor myszy jest nad kontenerem tooltipa */
.tooltip:hover .tooltiptext {
widoczność: widoczny;
}
</style>
<div class="tooltip">Najedź na mnie
<span class="tooltiptext">Tekst tooltipa</span>
</div>
Przykład wyjaśnienia
HTML:
Używając elementu kontenerowego (np. <div>) i dodając "tooltip" klasie. Gdy użytkownik przenosi mysz nad tym <div>, tekst tooltipa jest wyświetlany.
Tekst tooltipa znajduje się w class="tooltiptext" w wstawionych elementach (np. <span>).
CSS:
tooltip Klasa używa position:relativedo umieszczenia tekstu tooltipa (position:absolute）。 Proszę zauważyć: dotycząco umieszczania tooltipa, zobacz poniższy przykład.
tooltiptext Klasa przechowuje rzeczywisty tekst tooltipa. Domyślnie jest ukryty i staje się widoczny przy nawigacji myszą (zobacz niżej). Dodaliśmy również kilka podstawowych stylów: szerokość 120 pikseli, czarny tło, biały tekst, tekst wyśrodkowany oraz wewnętrzne marginesy górne i dolne po 5px (padding).
CSS border-radius Atrybut dodaje zaokrąglone rogi do tekstu tooltipa.
Gdy użytkownik przenosi mysz nad <div> z klasą "tooltip",:hover Wybór, który jest używany do wyświetlenia tekstu tooltipa.
Umieszczanie tooltipa
W tym przykładzie, tooltip znajduje się po prawej stronie tekstu wsparcia (left:105%）。 Proszę zauważyć również,top:-5px Używany do umieszczenia go w środku elementu kontenerowego. Używamy liczby 5, ponieważ wewnętrzne marginesy tekstowe tooltipa wynoszą 5px. Jeśli zwiększysz marginesy wewnętrzne, proszę również zwiększyć top Wartość atrybutu, aby upewnić się, że pozostaje on w środku. Jeśli chcesz umieścić tooltip po lewej stronie, zastosuj to również.
Tooltip po prawej stronie
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Wynik:
Tooltip po lewej stronie
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Wynik:
Jeśli chcesz, aby tooltip był na górze lub na dole, zobacz poniższy przykład. Proszę zauważyć, że użyliśmy ujemnego marginesu lewego o 60 pikseli (margin-left). To jest po to, aby tooltip był wyśrodkowany względem teksty wsparcia. Ta wartość jest połową szerokości tooltipa (120/2 = 60).
Górny tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Użyj połowy szerokości (120/2 = 60), aby wyśrodkować tooltip */
}
Wynik:
Dolny tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Użyj połowy szerokości (120/2 = 60), aby wyśrodkować tooltip */
}
Wynik:
Strzałka tooltipa
Aby utworzyć strzałkę narzędzia wyświetlaną na określonej stronie, dodaj zawartość "pusta" po tooltipie i użyj klasy pseudo-elementu ::after i content Właściwości. Strzałka sama w sobie jest stworzona z pomocą krawędzi. To sprawia, że tooltip wygląda jak bańka.
Ten przykład pokazuje, jak dodać strzałkę na dole tooltipa:
Dolny strzałka
.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śnienia
ustaw strzałkę wewnątrz tooltipa:top: 100% umieść strzałkę na dole tooltipa.left: 50% spowoduje centralne umieszczenie strzałki.
Uwaga:border-width Właściwość określa rozmiar strzałki. Jeśli zmienisz to ustawienie, proszę również zmienić margin-left zmień wartość na tę samą wartość. To spowoduje centralne umieszczenie strzałki.
border-color Używany do przekształcania zawartości w strzałkę. Ustawiliśmy górną krawędź na czarną, resztę na przezroczystą. Jeśli wszystkie strony są czarne, ostatecznie uzyskamy czarny prostokątny ram
Ten przykład pokazuje, jak dodać strzałkę na górze tooltipa. Proszę zauważyć, że tym razem ustawiliśmy kolor dolnej krawędzi:
Górny strzałka
.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 tooltipa:
Lewy strzałka
.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 tooltipa:
Prawy 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:
podpowiedzi z efektami wstępnego i końcowego wygasania (animacja)
Jeśli chcesz, aby tekst podpowiedzi wyświetlał się z efektami wstępnego i końcowego wygasania, możesz dodać CSS transition Atrybut jest używany z opacity Atrybuty są używane razem i w ciągu określonej liczby sekund (w przykładzie to 1 sekunda) z całkowicie niewidzialnych staje się 100% widocznych:
Przykład
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Poprzednia strona CSS animacje
- Następna strona CSS stylizacja obrazów
