Tworzenie podpowiedzi z CSS.
Przykłady Tooltip: Demo
Jej opis jest często używany do określenia dodatkowych informacji na temat czegoś, gdy użytkownik przesuwa wskaźnik myszy nad elementem:
Podstawowe podpowiedzi
Tworzenie podpowiedzi, który pojawia się, gdy użytkownik przesuwa kursor myszy nad elementem:
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> Spróbuj sam " Przykład Poradnik
HTML) Użyj elementu kontenera (jak <div> ) i dodać "tooltip" klasy do niego. Kiedy mysz użytkownika nad tym <div> , pokaże tekst podpowiedzi.
Tekst etykietka jest umieszczony wewnątrz elementu liniowego (jak <span> ) z class="tooltiptext" .
CSS) tooltip klasy wykorzystanie position:relative , co jest potrzebne, aby umieścić tekst podpowiedzi ( position:absolute .) Uwaga: Patrz przykłady poniżej jak ustawić podpowiedź.
tooltiptext klasa posiada rzeczywisty tekst podpowiedzi. Jest ona domyślnie ukryte i będą widoczne przy aktywowaniu (patrz niżej). Dodaliśmy także kilka podstawowych stylów do niego: szerokość 120 pikseli, czarny kolor tła, kolor biały tekst, tekst wyśrodkowany i 5px górze i na dole padding.
CSS3 border-radius właściwość jest używana, aby dodać zaokrąglone narożniki do tekstu podpowiedzi.
:hover wybieraka służy do wyświetlania tekstu podpowiedzi, kiedy użytkownik przesunie kursor nad <div> z class="tooltip" .
Pozycjonowanie podpowiedzi
W tym przykładzie, etykietka jest umieszczony po prawej stronie (left:105%) z "hoverable" tekstu (<div>) . Należy również pamiętać, że top:-5px służy do umieszczania go w środku jego elementu kontenera. Używamy numer 5, ponieważ tekst podpowiedzi ma górną i dolną dopełnienie 5px. Jeśli zwiększysz swoje dopełnienie, a także zwiększyć wartość top nieruchomości w celu zapewnienia, że pozostaje w środku (jeśli to jest coś, co chcesz). To samo dotyczy sytuacji, gdy chcesz podpowiedź umieszczony po lewej stronie.
Prawo Tooltip
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Wynik:
Lewy Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Wynik:
Jeśli chcesz podpowiedzi wyświetlane na górze lub na dole, patrz przykłady poniżej. Zauważ, że używamy margin-left mienia o wartości minus 60 pikseli. Ma to na celu wyśrodkowania podpowiedź powyżej / poniżej tekstu hoverable. Jest on ustawiony na połowie szerokości podpowiedzi za (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Wynik:
Dno Tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Wynik:
Tooltip Strzałki
Aby utworzyć strzałkę, która powinna wynikać z konkretnej stronie podpowiedzi, dodaj "pusty" treść po podpowiedzi, z klasą pseudoelement ::after wraz z content nieruchomości. Sam strzałka jest tworzony przy użyciu granic. Spowoduje to, że wygląd podpowiedzi jak bańka mowy.
Ten przykład pokazuje, jak dodać strzałkę na dole podpowiedzi:
Dno 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 Poradnik
Ustaw strzałkę wewnątrz podpowiedzi: top: 100% będzie umieścić strzałkę na dole podpowiedzi. left: 50% skoncentruje strzałkę.
Uwaga: border-width właściwość określa wielkość strzałki. Jeśli to zmienić, także zmienić margin-left wartość taka sama. Pozwoli to zachować strzałkę centralnie.
border-color jest wykorzystywana do przekształcania treści pod strzałką. Stawiamy górną granicę na czarno, a reszta do przejrzyste. Jeśli wszystkie strony były czarne, by skończyć z czarnej skrzynki.
Ten przykład pokazuje, jak dodać strzałkę na górze podpowiedzi. Zauważ, że ustawiamy dołu kolor obramowania ten czas:
Top 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 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:
Fade In Podpowiedzi (Animacja)
Jeśli chcesz zanikać w tekście podpowiedzi, gdy chodzi o sposób widoczny, można użyć CSS3 transition własności wraz z opacity własności i przejść od bycia całkowicie niewidoczny dla 100% widoczne w wielu określonych sekund (1 sekunda w naszym przykładzie):
Przykład
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Spróbuj sam " Uwaga: Więcej informacji na temat przejścia i animacje w dalszej części poradnika.