Jak pokazać, ustawić i stylizować podpowiedź w HTML i CSS?
Pogląd jest określany jako element, który zawiera dodatkowe informacje dotyczące elementu HTML. Ta dodatkowa informacja jest wyświetlana za każdym razem, gdy użytkownik przenosi kursor myszy na ten konkretny element. Te podpowiedzi odgrywają ważną rolę w modernizacji projektu stron internetowych, ponieważ korzystanie z nich uniemożliwi wyświetlanie dodatkowych informacji na stronie internetowej, które mogą nie wyglądać dobrze. W tym artykule oświecimy się na temat pokazania, pozycji i stylizacji podpowiedzi w HTML i CSS.
Zanim zagłębimy się w inne szczegóły dotyczące podpowiedzi, najpierw dowiedzmy się, jak stworzyć podstawową podpowiedź.
Jak tworzyć/pokazać podpowiedź
Poniższy przykład pokazuje, jak utworzyć podstawową podpowiedź.
Html
Przynieś mi myszkę Tekst podpowiedziW powyższym kodzie utworzyliśmy element DIV i umieściliśmy w nim pewną zawartość i używając elementu spanów, dodajemy tekst podpowiedzi wewnątrz elementu DIV. Należy zauważyć, że Div został przypisany do klasowej podpowiedzi, tymczasem element rozpiętości otrzymał klasę podsumowania.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;
Pozycja: absolutna;
z-index: 1;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Tutaj dajemy elementowi DIV względną pozycję do umieszczenia tekstu podpowiedzi i wyświetlania go jako elementu blokowego wbudowanego, aby podpowiedź została umieszczona tuż obok elementu Div. Ponadto, w odniesieniu do tego Div, dostosowujemy pozycję podpowiedzi jako absolutną. Ponadto widoczność podpowiedzi jest ukryta, ale gdy kursor myszy zostanie przeniesiony przez element div, podpowiedź będzie widoczna.
Wyjście
Pokaz został utworzony pomyślnie.
Teraz, gdy wiemy, jak zrobić podpowiedź, zbadajmy, jak ustawić podpowiedź.
Jak ustawić podpowiedź
Istnieją cztery rodzaje pozycji, które można przypisać do podpowiedzi, które są wymienione poniżej.
- Szczyt
- Spód
- Lewy
- Prawidłowy
Wszystkie te pozycje zostały pokazane poniżej za pomocą przykładów.
Jak ustawić podpowiedź u góry
W celu umieszczenia podpowiedzi u góry użyjemy przykładu używanego powyżej.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;
/ * Aby ustawić górną pozycję podpowiedzi */
Pozycja: absolutna;
z-index: 1;
Dół: 100%;
Po lewej: 60%;
margines -lew: -65px;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
W celu ustawienia podpowiedzi używamy wartości bezwzględnej właściwości pozycji, aby można ją było umieścić w odniesieniu do elementu DIV. Ponadto, aby umieścić go przed elementem, podajemy mu kolejność stosu 1 za pomocą właściwości z-index. Ponadto, aby umieścić go dokładnie nad elementem, który ustawiliśmy dolną, lewą i margines.
Wyjście
Pogląd otrzymał najwyższą pozycję.
Jak ustawić podpowiedź na dole
Aby ustawić podpowiedź u dołu, rozważ poniższy przykład.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;/ * Aby ustawić dolną pozycję podpowiedzi */
Pozycja: absolutna;
z-index: 1;
Top 100%;
Po lewej: 60%;
margines -lew: -65px;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Wartość bezwzględna właściwości pozycji pozycjonuje podpowiedź w odniesieniu do elementu DIV. Ponadto kolejność stack podpowiedzi jest ustawiona na 1, aby umieścić go przed kontenerem Div. Ponadto, aby umieścić go dokładnie poniżej elementu, który ustawiliśmy górną, lewą i marginesową właściwości.
Wyjście
Podpowiedź została umieszczona na dole.
Jak ustawić podpowiedź w lewo
Jeśli chcesz ustawić podpowiedź po lewej stronie elementu, zapoznaj się z przykładem.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;
/ * Aby ustawić lewą pozycję podpowiedzi */
Pozycja: absolutna;
z-index: 1;
TOP: -6px;
Racja: 102%;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Oprócz pozycji i właściwości z indeksu Z używamy górnej części, a także prawe właściwości, aby ustawić podpowiedź dokładnie po lewej stronie określonego elementu.
Wyjście
Z powodzeniem ustawiłem podpowiedź po lewej stronie.
Jak ustawić podpowiedź w prawo
Tutaj pokazaliśmy, w jaki sposób możesz ustawić podpowiedź po prawej stronie elementu.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;/ * Aby ustawić prawą pozycję podpowiedzi */
Pozycja: absolutna;
z-index: 1;
TOP: -6px;
Po lewej: 102%;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Tutaj używamy górnych i lewych właściwości, aby ustawić pozycję podpowiedzi na prawo od elementu.
Wyjście
Podpowiedź została dostosowana po prawej stronie.
Jak stylizować podpowiedź
W powyższych przykładach zaprojektowaliśmy podpowiedź przy użyciu podstawowych właściwości CSS, takich jak kolor tła, kolor, tekst, promień graniczny i wyściółka. Istnieją jednak inne sposoby stylizowania podpowiedzi. Tutaj pokazaliśmy ci niektóre z nich.
Dodanie strzałki do podpowiedzi
W celu dodania strzałki, jak mowa bąbelkowa, rozważ poniższy przykład.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;
Pozycja: absolutna;
z-index: 1;
Dół: 150%;
Po lewej: 50%;
margines -lew: -60px;
.podpowiedź .tooltiptext :: po
treść: "";
Pozycja: Absolute;/ * do ustawienia podpowiedzi */
Top 100%;
Po lewej: 50%;
margines -lew: -6px;
/ * Aby dodać strzałkę */
granica: 6px stały;
kolor graniczny: przezroczyste przezroczyste przezroczyste przezroczyste;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Tutaj używamy: po pseudoelementie do wyświetlania strzałki z określonej strony podpowiedzi, dlatego zawartość po podpowiedzi pozostaje pusta. Jednak w celu utworzenia strzałki używana jest właściwość graniczna. Aby utrzymać strzałkę w środku podpowiedzi, szerokość granicy i właściwości z lewej margines.
Używamy właściwości w kolorze granicznym, aby nadać kolor każdej granicy strzałki. Tylko górna granica otrzymuje kolor RosyBrown, a reszta jest ustawiona na przezroczystą. Gdyby wszystkie otrzymały jakiś kolor, strzałka pojawiłaby się jako kwadrat.
Wreszcie podpowiedź i strzałka zostały umieszczone nad elementem. Jeśli chcesz ustawić podpowiedź wraz z strzałką na dowolną inną pozycję, zapoznaj się z przykładami podanymi powyżej.
Wyjście
Z powodzeniem dodał strzałkę do podpowiedzi.
Jak dodać efekt blaknięcia do podpowiedzi
Aby podać określony efekt, na przykład efekt blaknięcia w podpowiedzi, rozważ poniższy przykład.
CSS
.podpowiedźPozycja: względny;
Wyświetlacz: Block Inline;
.podpowiedź .tooltiptext
Widoczność: ukryta;
kolor tła: Rosybrown;
kolor biały;
RADIUS BERDER: 7px;
Wyściółka: 5px 10px;
Pozycja: absolutna;
z-index: 1;
Dół: 150%;
Po lewej: 50%;
margine-lew: -60px;/ * Aby dodać efekt blaknięcia do podpowiedzi */
Krycie: 0;
przejście: krycia 2s;
.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Krycie: 1;
W powyższym kodzie, w celu zniknięcia podpowiedzi, gdy mysz unosi się nad elementem, właściwość przejściowa jest używana wraz z właściwością krycia. Czas trwania przejścia został ustawiony na 2 sekundy, co oznacza, że podpowiedź przejdzie od niewidocznego do całkowicie widocznego.
Wyjście
Efekt blaknięcia działa poprawnie.
Wniosek
Pogląd jest określany jako element, który dostarcza dodatkowych informacji o elemencie za każdym razem, gdy kursor myszy jest wnawiany przez ten element. Aby dodać podpowiedź elementu, właściwość pozycji jest wykorzystywana na podstawie lokalizacji, w której chcesz pokazać podpowiedź. Poza tym możesz dodać strzałkę lub efekt blaknięcia do podpowiedzi, aby nadać mu styl. W tym artykule oświeciliśmy się, jak pokazać, pozycjonować i stylizować podpowiedź za pomocą HTML i CSS.