Jak utworzyć prostą etykietę CSS3

Etykietki narzędzi to świetny sposób, aby pokazać użytkownikowi więcej informacji po najechaniu kursorem na obraz lub tekst. Można ich używać na przykład do dodawania napisów do zdjęć lub dłuższych opisów linków lub do wszelkich przydatnych informacji, które poprawiłyby komfort korzystania z witryny bez naruszania projektu.

Dzisiaj pokażę ci, jak utworzyć prostą etykietkę narzędziową przy użyciu HTML i CSS, aby wyświetlić tag tytułu twoich hiperłączy.

Zacznijmy od stworzenia prostego znacznika dla linku. Musimy nadać mu tytuł, który będzie treścią podpowiedzi i przypisać mu klasę:

CSS3 Tooltip

Następnym krokiem jest stworzenie podstawowej fryzury dla naszej klasy podpowiedzi:

.tooltip{display: inline;position: relative;}

Teraz wyświetlamy naszą etykietkę z linkiem przy użyciu względnego pozycjonowania. Następnie chcemy utworzyć zaokrąglone pudełko, aby utworzyć treść etykiety narzędzia, i ustawić je tak, aby unosiło się nad linkiem:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Używamy selektora hover, który wybiera element, w tym przypadku nasz link, na mouseover i selektor: after, który wstawia zawartość po wybranym elemencie. Podaliśmy czarne tło z 80% kryciem, a w przeglądarkach, które nie obsługują kolorów RGBA, dostaliśmy ciemnoszare tło.

Lekko zaokrąglone rogi tworzy się za pomocą atrybutu border-radius, a kolor tekstu ustawiamy na biały. Na koniec ustawiliśmy pole podpowiedzi po lewej stronie linku i dodaliśmy trochę dopełnienia.

Oprócz stylizacji i pozycjonowania ustawiliśmy właściwość content:

content: attr(title);

Ta właściwość pozwala nam wstawiać pożądaną zawartość, która może być łańcuchem, plikiem multimedialnym lub atrybutem elementu. W tym przypadku używamy atrybutu tytułu linku.

Teraz, gdy umieścisz kursor nad linkiem, etykieta powinna pojawić się nad nim z tekstem ustawionym jako tytuł linku. Mamy jednak jeden problem, informacja o tytule jest wyświetlana dwukrotnie: raz w podpowiedzi i raz przez przeglądarkę. Aby to naprawić, musimy wprowadzić niewielką zmianę w naszym kodzie HTML:

Etykietka CSS3 

To, co tutaj zrobiliśmy, polega na zawijaniu tekstu linku w tagu zakresu z własnym atrybutem tytułu. Teraz przeglądarka wyświetli zestaw tytułów w znaczniku span, gdy link zostanie obrócony.

Aby zakończyć, dodamy strzałkę na dole etykiety narzędzia, aby nadać mu odrobinę dodatkowego stylu. Robimy to za pomocą: przed selektorem i niektórymi stylami obramowania:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Używamy tutaj kilku haseł granicznych, aby stworzyć efekt strzałki: ustawianie kolorów obramowania po lewej i prawej stronie w celu uzyskania przezroczystości i kontrolowania szerokości obramowania. Ustawiliśmy również strzałkę tak, aby znalazła się na dole pola podpowiedzi.

I tam to masz, prosta podpowiedź z tagiem tytułowym elementu. Możesz również użyć tego do tagów alt obrazu, a nawet po prostu umieścić własny tekst w CSS, aby pojawił się tam, gdzie chcesz.

Możesz zobaczyć działające tutaj demo .

Jak budujesz podpowiedzi? Czy użyłeś tej techniki na stronie? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, obraz podpowiedzi przez Shutterstock.