Etykietka w CSS. Dowiedz się, jak utworzyć podpowiedź w czystym HTML i CSS

Powodem, dla którego używamy znacznika a zamiast abbr, dfn lub span, jest to, że IE6 słabo obsługuje pseudoselektor:hover dla elementów innych niż .

Jeśli nie zamierzasz obsługiwać IE6, możesz użyć innego tagu.

Każdy element span w przykładzie jest ustawiony na klasę klasyczną (w przypadku zwykłej podpowiedzi) lub niestandardową (z parametrami krytycznymi, pomocą, informacjami lub ostrzeżeniemi pasującymi do używanego schematu kolorów).

To użycie stylizacji ma również kilka bonusów w postaci elementu em (który ustawia tytuł podpowiedzi) i obrazu (który jest używany jako ikona w podpowiedzi; możesz używać własnych obrazów).

Napisaliśmy kod HTML strony i czas sprawić, aby podpowiedzi spełniły swoje zadanie.

Poniższy kod, który został dodany do sekcji strony, ustawia każdy link zawierający podpowiedź do ładnego, małego stylu z podkreśleniem w postaci przerywanej linii (aby odróżnić go od zwykłego linku, który ma podkreślenie linią ciągłą) i ustawia kursor ze znakiem zapytania (także dla zróżnicowania wizualnego).

Usuwa także podkreślenie i ustawia kolor (dzięki czemu element nie wygląda jak zwykły link).

Druga część kodu po prostu ukrywa podpowiedź, dopóki nie będzie potrzebna.

Wszystko jest bardzo proste!

Treść podpowiedzi jest usuwana z widoku za pomocą ujemnej właściwości marginesu lewego, a nie wyświetlania: brak lub widoczność: ukryta, ponieważ niektóre czytniki ekranu ignorują te właściwości.

Wkrótce sprawimy, że podpowiedzi będą działać tak samo w różnych przeglądarkach. Dodajmy teraz kilka linii kodu CSS.

Dodając poniższy fragment kodu, na ekranie wyświetlimy podpowiedzi, choć będą one wyglądać banalnie i trudno będzie je wizualnie oddzielić od reszty tekstu.

Być może zastanawiasz się, dlaczego uwzględniono ostatnią linię powyższego kodu? Ustawia przezroczystość tła łącza. Podczas testowania podpowiedzi odkryłem dziwny efekt w IE6, którego nie można było usunąć, dopóki istniało tło łącza!

Powyższy kod zapewnia funkcjonalność podpowiedzi. Wyświetlane są na ekranie, jednak dość trudno je oddzielić od ogólnego tekstu. Nie ma schematów kolorów, które wyróżniałyby tekst podpowiedzi na stronie.

Poniższy kod ustawia schemat kolorów dla każdego z pięciu stylów podpowiedzi.

Po zmianie kodu strony i aktualizacji w przeglądarce, podpowiedzi będą wyświetlane po najechaniu myszką na link niemal tak samo we wszystkich przeglądarkach.

Kod CSS jest bardzo prosty, ale zapewnia świetny wygląd podpowiedzi i wszędzie spełnia swoje zadanie. Schemat kolorów można zmienić według własnego uznania.

Zanim zakończymy ten samouczek, dodamy kilka linii kodu CSS3, aby dodać efekty wizualne do naszych podpowiedzi. Ustawmy zaokrąglone rogi za pomocą właściwości border-radius i dodajmy trochę wymiaru za pomocą właściwości box-shadow.

Ponieważ żadna z tych właściwości nie jest obsługiwana na całym świecie, będą one działać tylko w niektórych najnowszych wersjach przeglądarek. Ale tam, gdzie działają, podpowiedzi będą wyglądać elegancko i seksownie!

Dodajmy poniższy kod do selektor.tooltip:hover span i odświeżmy stronę.

Efekty wizualne obramowania, cienia i przezroczystości podnoszą etykietkę narzędzia nad tekstem strony, dzięki czemu informacje są kontrastowe i łatwe do odczytania.

Możesz zauważyć, że używane są nie tylko oficjalne właściwości CSS3, ale także rozszerzenia dla Mozilli i WebKit.

Ten poradnik pokazuje, że ulepszenie interfejsu nie wymaga dużego wysiłku. Oprócz tego warto przejrzeć doświadczenia z używania CSS, które mogą przydać się przy wyznaczaniu nowego poziomu interaktywności aplikacji webowej.

Etykietka HTML to blok z dodatkowymi informacjami, który pojawia się po najechaniu myszką na konkretny element strony internetowej. Dzisiaj stworzymy własną podpowiedź przy użyciu HTML i CSS:

Będziemy mogli używać podpowiedzi CSS dla większości elementów takich jak linki, tagi, stylizowany tekst itp. Będziemy musieli zastosować kilka klas do elementu i dodać atrybut data z tekstem podpowiedzi.

Musimy utworzyć dokument HTML i ustawić znaczniki źródłowe:

Podpowiedzi Demo // treść

Dodałem link do pliku Normalize.css, który pomaga przywrócić domyślne style wszystkich przeglądarek i zapewnia, że ​​każdy element wygląda tak samo we wszystkich przeglądarkach. W przeciwieństwie do standardowego resetowania CSS, Normalize.css nie usuwa wszystkich domyślnych stylów, więc nie musisz przepisywać stylu każdego elementu od zera.

Stworzyłem element div z klasą kontenera, w którym umieścimy podstawowe przykłady podpowiedzi HTML. Oto style dla klasy body i .container:

body (rodzina czcionek: „Work Sans”, bezszeryfowa; rozmiar czcionki: 1,5 em; wysokość linii: 1,4 em; grubość czcionki: 700; kolor tła: #28ABE3; kolor: #fff; ) .container ( szerokość: 800 pikseli; margines: 100 pikseli automatyczny; tło: gradient promieniowy (okrąg w najdalszym rogu przy 400 pikseli 250 pikseli, #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Wyśrodkowałem div kontenera, ustawiając margines-lewy i prawy margines na auto. Dodano także trochę stylizacji do części ciała, aby wyglądała lepiej.

Zdecydowałem się dodać mały, jasny gradient CSS jako tło. Jeżeli przeglądarka nie obsługuje gradientów CSS (dotyczy to głównie IE 8 i 9), kolor tła zostanie przywrócony z powrotem na domyślny niebieski (kolor tła sekcji body).

Użyję wskazówek HTML dotyczących znaczników zakotwiczenia, ale możesz przypisać klasy do innych elementów wbudowanych, takich jak silny tag lub span . Poniżej znajduje się zawartość elementu div kontenera:

• Etykietka na dole
• Etykietka po lewej stronie

  Do linków przypisałem dwie klasy. Klasa podpowiedzi będzie odpowiedzialna za treść podpowiedzi, a druga klasa określi jej położenie.

  Możesz także zobaczyć niestandardowy atrybut data-, który zawiera tekst naszej podpowiedzi HTML.

  Tworzenie klasy podpowiedzi

  Poniżej znajduje się kod klasy podpowiedzi:

  Etykietka narzędzia ( pozycja: względna; ) .podpowiedź: po ( pozycja: bezwzględna; dopełnienie: 8 pikseli; obramowanie: 3 piksele stałe #fff; promień obramowania: 8 pikseli; kolor tła: #1FDA9A; rozmiar czcionki: .9em; grubość czcionki : pogrubienie; kolor: #fff; treść: attr (podpowiedź-danych); minimalna szerokość: 80 pikseli; /* szerokość: -moz-max-content; widoczność: ukryta; .tooltip:hover:after (krycie: 1; widoczność: widoczne; )

  Sama podpowiedź HTML jest pseudoelementem :after i jest umieszczona absolutnie. Dlatego konieczne jest przypisanie względnej pozycji elementowi kotwiącemu. Dodałem kilka podstawowych stylów, takich jak dopełnienie, obramowanie, rozmiar i szerokość czcionki. Przyjrzyjmy się bliżej właściwości content.

  Zawiera attr() - wartość, która przechowuje naszą niestandardową etykietkę danych i używa jej do wyświetlenia tekstu samej podpowiedzi. Zamiast podpowiedzi danych możesz użyć dowolnej innej nazwy, upewnij się tylko, że zaczyna się od data- . Więcej informacji na temat tych atrybutów można znaleźć tutaj.

  Treść podpowiedzi ma minimalną szerokość 80 pikseli. Jeśli chcesz, aby treść podpowiedzi rozciągnęła się w jedną linię, dodaj wartość max-content dla właściwości szerokość, która jest obecnie skomentowana. Należy zauważyć, że jest to funkcja eksperymentalna, dlatego należy używać przedrostków dostawcy -webkit- i -moz-.

  Aby nadać podpowiedzi HTML efekt animacji slajdu, używamy właściwości przejścia. Zwróć uwagę na wartość 0,25s, która określa opóźnienie przed wyświetleniem lub ukryciem podpowiedzi. Tym samym nie zostanie on wyświetlony w przypadku omyłkowego najechania myszką na tekst, a jedynie wtedy, gdy najedziesz myszką na tekst przez dłuższy czas. Ustawiłem także krycie na 0 i widoczność na ukrytą. Nie możemy użyć display: none; , ponieważ element zniknie całkowicie i nie zobaczymy żadnych efektów przejścia. Krycie i widoczność zmieniają się po najechaniu kursorem myszy na element.

  Wynik:

  Patrzeć

  Uwaga: zmieniłem/usunąłem część znaczników i stylizacji w wersji demonstracyjnej na CodePen. Aby zobaczyć końcowy wynik, sprawdź wersję demonstracyjną na końcu tego artykułu.

  Dodawanie ruchu

  Teraz, gdy zaimplementowaliśmy podpowiedź HTML pojawiającą się/znikającą po najechaniu myszką, przesuńmy ją. Przypisaliśmy już właściwość animacji, pozostaje nam tylko ustawić pozycję początkową, z której ma się ona pojawić, oraz pozycję końcową:

  /*Początkowa pozycja podpowiedzi*/ .tooltip-top:po ( dół: 150%; lewa: 0; ) .tooltip-bottom:po ( góra: 155%; lewa: 0; ) .tooltip-left:po ( prawa: 130%; minimalna szerokość: 100 pikseli; ) .tooltip-right:after ( lewy: 130%; minimalna szerokość: 100px; ) /*Pozycja końcowa końcówki*/ .tooltip-top:hover:after ( dół: 120%; ) .tooltip-bottom:hover:after ( góra: 125%; ) .tooltip-left:hover:after ( po prawej: 110%; ) .tooltip-right:hover:after ( po lewej: 110%; )

  Postanowiłem dodać tę funkcjonalność do dodatkowych zajęć. Jeśli więc przypiszesz np. klasę .tooltip-left , podpowiedź pojawi się po lewej stronie tekstu, jeśli dodasz .tooltip-top , podpowiedź pojawi się na górze itd.

  Zobacz wersję demonstracyjną

  W tym demo używam klasy .tooltip-right. Możesz eksperymentować i używać różnych klas, aby definiować różne pozycje podpowiedzi HTML.

  Tworzenie trójkąta

  Ostatnim elementem podpowiedzi jest mały trójkąt po jednej stronie bloku. Stworzymy go przy użyciu pseudoklasy :before (pseudoklasa :after jest już używana w samej podpowiedzi). Przypisujemy go do naszych czterech klas pozycji, aby dla każdej z nich odpowiednio wyprowadzono trójkąt:

  /** * Trójkąty */ .tooltip-top:przed, .tooltip-bottom:przed, .tooltip-left:przed, .tooltip-right:przed (treść: ""; wyświetlacz: blok; pozycja: bezwzględna; obramowanie- szerokość: 7 pikseli; kolor obramowania: rgba(0, 0, 0, 0); przejście: wszystkie .2s łatwość wejścia .25s; góra: najechanie: przed, .tooltip-bottom:hover: przed, .tooltip- left:hover:before, .tooltip-right:hover:before ( krycie: 1; widoczność: widoczne; )

  Trójkąt tworzymy nadając szerokość obramowaniu, gdy sam element nie ma szerokości ani wysokości. W tym przypadku szerokość ramki jest ustawiona na 7 pikseli. Kolor ramki jest całkowicie przezroczysty, co jest bardzo ważne. W poniższym fragmencie kodu przypisuję kolor do odpowiedniej strony ramki, co pozwala mi zdefiniować kształt trójkąta.

  Dzisiaj stworzymy podpowiedzi za pomocą CSS. Etykietki narzędzi to coś, co widzisz po najechaniu myszką, na przykład na link, jeśli atrybut tytułu zawiera jego opis.
  
  Etykietki narzędzi można używać zarówno w przypadku linków, jak i obrazów.

  W swojej pierwotnej formie podpowiedź wygląda następująco:

  Podpowiedź jest wyświetlana przy użyciu standardowej metody systemowej przy użyciu atrybutu tytułu.
  Standardowy kod linku z podpowiedzią bez dekoracji:

  Połączyć

  Etykietka CSS

  Możesz stylizować etykietkę narzędzia za pomocą CSS. Rozważymy trzy opcje podpowiedź w CSS.

  Niestety nie ma „przepisu” CSS na projekt tytułu, więc będziemy musieli dodać dodatkowe atrybuty, oznaczyć ich wygląd i dodać je do kodu linku/obrazu, dla którego chcemy zrobić piękny etykietka CSS.

  W pierwszym przykładzie to zrobimy etykietka CSS na górze obrazu, na samym dole.

  W tym celu użyjemy dwóch atrybutów: image, a żeby podpowiedź działała, użyjemy ::after i data-text do wyświetlenia tekstu podpowiedzi.

  Style CSS dla tego przykładu:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  .image ( display : inline-block ; pozycja : względna ; ) .image : hover :: after ( content : attr (tekst-danych) ; /* Wyświetl tekst podpowiedzi */ pozycja : bezwzględna ; lewa : 0 ; prawa : 0 ; dół: 0px ; /* Pozycja podpowiedzi */ z-index: 1 ; /* Wyświetl podpowiedź nad innymi elementami */ tło : rgba ( 0 , 255 , 102 , 0.6 ) ; i jego poziom przezroczystości */ color : #fff ; /* Kolor tekstu */ text-align : center ; /* Wyrównanie tekstu do środka */ Font-family : Arial, bezszeryfowy ; -size: 11px / * Rozmiar tekstu podpowiedzi */ dopełnienie: 5px 10px; /* Marginesy */ border: 1px solid #333;

  Obraz ( display: inline-block; pozycja: względna; ) .image:hover::after ( content: attr(data-text); /* Wyświetl tekst podpowiedzi */ pozycja: bezwzględna; lewa: 0; prawa: 0; dół: 0px; /* Pozycja podpowiedzi */ z-index: 1; /* Wyświetl podpowiedź na wierzchu innych elementów */ tło: rgba(0,255,102,0.6); kolor: # fff; /* Kolor tekstu */ wyrównanie tekstu: do środka; /* Wyrównanie tekstu do środka */ rodzina czcionek: Arial, bezszeryfowa; /* Krój czcionki */ rozmiar czcionki: 11 pikseli; * Rozmiar tekstu podpowiedzi * / dopełnienie: 5 pikseli 10 pikseli; /* Marginesy */ obramowanie: 1 pikseli #333;

  1

  

  Wynik:

  

  Ten projekt nie będzie działał w przypadku linków, dlatego użyjemy dla nich nieco innych opcji.
  Pierwsza opcja wyświetli podpowiedź nad linkiem.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  .podskazka( display : inline ; pozycja : względna ; ) .podskazka : hover: after ( tło: #333 ; tło: rgba (204 , 102 , 0 , .8) ; promień obramowania: 5px; dół: 26px ; kolor: #fff ; treść: attr (tytuł) ; dopełnienie: 5px 15px ; pozycja: bezwzględna ; szerokość: auto; .podskazka: hover: before ( /* Dodaj strzałkę na dole bloku podpowiedzi */ border: solid; border- kolor: #cc6600 przezroczysty; szerokość obramowania: 6px 0 6px;

  Podskazka(wyświetlanie: inline; pozycja: względna;).podskazka:hover:after( tło: #333; tło: rgba(204,102,0,.8); promień obramowania: 5px; dół: 26px; kolor: #fff; treść: attr(tytuł); dopełnienie: 5px 15px; pozycja: bezwzględna; szerokość: auto;).podskazka:hover:before( /* Dodaj strzałkę na dole bloku podpowiedzi */ border : solid; kolor obramowania: #cc6600 przezroczysty; szerokość obramowania: 6px 6px 0 6px;

  Połączyć

  Ostatnią opcją jest wyświetlenie podpowiedzi pod linkiem. Opcja jest podobna do poprzedniej, z tą różnicą, że poniżej wyświetlana jest podpowiedź.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

  .tooltip ( pozycja : względna ; /* Uczyń element nadrzędnym dla podpowiedzi */ kursor : pomoc ; ) .tooltip span ( pozycja : bezwzględna ; /* Usuń element z przepływu */ margines-lewy: -30000px ; / * I ukryj go daleko za krawędzią ekranu */ kolor tła: rgba (0 , 0 , 153 , .8) ; /* Tło wyskakującego bloku */ color : #fafafa ; dopełnienie: 10px /* Dopełnienie */ -webkit -border-radius: 5px ; /* Zaokrąglij rogi */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; Po najechaniu myszką */ margines-lewy: 0 ; /* Przywróć blok z odległej krawędzi ekranu na jego miejsce */ szerokość : 250px ; /* Ustaw szerokość */ z-index : 1000 ; bardzo górny */ górny: 30px; */ lewy: 20px; /* Lewe wypełnienie */ .tooltip span: after (treść: "" ; /* Dodana treść */ szerokość : 0 ; /* Ukryłem, zmieniając na 0 */ wysokość: 0; obramowanie-dół: 10px solid #000099; /* Użyj dolnej krawędzi, aby ustawić kolor i wysokość trójkąta */ border-right : 30px solid transparent ; /* Right - szerokość trójkąta w prawo */ position : bezwzględna ; /* Pozycja względem bloku nadrzędnego */ top: -10px; po lewej: 10px; )

  Etykietka narzędzia ( pozycja: względna; /* Ustaw element jako nadrzędny dla podpowiedzi */ kursor: pomoc;).tooltip span ( pozycja: bezwzględna; /* Usuń element z przepływu */ margines-lewy: -30000px; /* I ukryj go daleko za krawędzią ekranu */ kolor tła: rgba(0,0,153,.8); /* Tło bloku wyskakującego */ kolor: #fafafa; /* Kolor tekstu */ padding:10px; * Wyściółka */ -webkit-border- promień: 5px; /* Zaokrągla rogi */ -moz-border-radius: 5px; -khtml-border-radius: 5px; ( /* Po najechaniu */ margines-left : 0; /* Przywróć blok z odległej krawędzi ekranu na jego miejsce */ szerokość: 250px; /* Ustaw szerokość */ z-index: 1000; /* Umieść na samej górze */ /* Ustaw go względem bloku nadrzędnego */ top:30px ; /* Górne dopełnienie */ left:20px; /* Lewe dopełnienie */ ).tooltip span:after( content: ""; /* Dodano treść */ szerokość:0; /* Ukryliśmy ją, zmieniając ją na 0 */ wysokość :0; border-bottom: 10px solid #000099; /* Użyj dolnej krawędzi, aby ustawić kolor i wysokość trójkąta * / obramowanie po prawej: 30px pełne przezroczyste; /* Right - szerokość trójkąta w prawo */ pozycja: bezwzględna; /* Pozycja względem bloku nadrzędnego */ top:-10px; po lewej:10px;)

  Guru układu raczej nie znajdą w tym poście niczego nowego dla siebie. Ten post jest przeznaczony raczej dla początkujących projektantów układów, którzy podobnie jak ja mieli problemy z tworzeniem i stylizowaniem uniwersalnych podpowiedzi.

  Ostatnio, prowadząc małego bloga, stanąłem przed zadaniem zrobienia stylowych, a jednocześnie prostych podpowiedzi. Po wypróbowaniu różnych sposobów tworzenia oddzielnych kontenerów div dla podpowiedzi, czy tworzenia podpowiedzi w czystym CSS, znalazłem uniwersalne rozwiązanie, które nie zaśmieci kodu, będzie kompatybilne z różnymi przeglądarkami, a jednocześnie będzie bardzo proste w implementacji.
  Wszystkich zainteresowanych moim sposobem rozwiązania tego prostego problemu odsyłam do kot.

  Rozwiązanie Metoda, którą Ci zaproponuję, jest dość prosta i skuteczna. Działa we wszystkich przeglądarkach, nawet IE 6 (testowany przeze mnie wielokrotnie). Łatwe do zmiany i wygodne. Nie zaśmieca kodu i czyni go przejrzystym. Można go łatwo zmienić, dopasowując go do swoich potrzeb. Na przykład opóźnij wyświetlanie podpowiedzi za pomocą setTimeout lub czegoś innego. HTML Załóżmy, że mamy stronę HTML z linkiem, kiedy najedziemy na nią myszką, musimy wyświetlić podpowiedź:
  Link do podpowiedzi
  Jak być może zauważyłeś na liście, używam preprocesora CSS LESS.
  Zawarliśmy style CSS i skrypty w oddzielnych plikach. Mamy też jeden link i blok div, który będzie kontenerem podpowiedzi.
  Specyfikacja HTML5 pozwala na użycie niestandardowych atrybutów typu data-atribute, które mogą przechowywać pewne informacje o elemencie lub bloku. To właśnie w atrybutach danych będziemy zapisywać tekst podpowiedzi.
  Połączyć
  Do przechowywania używam atrybutu data-tooltip.
  Skończyliśmy z HTML - możemy przejść do stylów CSS. Korzystam z biblioteki LESS Elements i polecam ją każdemu, więc napiszę kilka właściwości w tym frameworku.
  @import "css/elements.less"; #tooltip (indeks Z: 9999; pozycja: bezwzględna; wyświetlacz: brak; góra: 0px; lewa: 0px; kolor tła: #000; dopełnienie: 5px 10px 5px 10px; kolor: biały; .opacity(0.5); . zaokrąglony (5px)
  Z zestawienia jasno wynika, że ​​w pierwszej linii łączymy LE, ustawiamy blok div#tooltip na pozycjonowanie absolutne i ukrywamy go. Następnie nadajemy blokowi kolor tła i kolor tekstu, zaokrąglamy rogi (5px) i ustawiamy wartość przezroczystości na 50%. jQuery Teraz przychodzi zabawna część - jQuery.
  $.jQuery(dokument).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "góra": eventObject.pageY + 5, "left": eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "góra": 0, "lewo": 0 )); )); ));// Gotowy koniec.
  Teraz dodajemy do zaznaczenia wszystkie elementy posiadające atrybut data-tooltip i po najechaniu myszką na żądany element otrzymujemy wartość podpowiedzi i zapisujemy ją w zmiennej. Następnie dodajemy tekst podpowiedzi do bloku #tooltip, nadajemy mu współrzędne kursora od krawędzi strony + 5 px i na koniec wyświetlamy blok z podpowiedzią w odpowiednim miejscu. Po tym jak mysz opuści element, ukrywamy blok #tooltip, czyścimy jego zawartość i ustawiamy na 0;0;.

  To wszystko!
  W rezultacie otrzymamy coś takiego: Demo

  Dzięki temu prostemu skryptowi wszystkie elementy na stronie posiadające atrybut data-tooltip otrzymają podpowiedź.

  Dziękuję za uwagę!