Często dodatkowe informacje na stronach internetowychumieszczane w formie podpowiedzi podczas najechania myszką, na przykład w celu odszyfrowania złożonych skrótów lub wyjaśnienia czynności użytkownika. Podobne rozwiązanie front-end nazywa się etykietką. Oszczędza miejsce na stronie, umożliwiając wyświetlanie tylko podstawowych danych, ale pozostawiając czytelnikowi możliwość zapoznania się z dodatkami, jeśli to konieczne. Oprócz funkcji czysto informacyjnej, podpowiedzi mogą być ważnymi elementami projektu, które podkreślają ogólny styl strony i przyciągają uwagę.
Element, którego interakcja powoduje podpowiedź, nazywa się celem.
Bloki wyskakujące zwykle zawierają ważne elementyale nie podstawowe informacje. Zakłada się, że użytkownik powinien się z nim zapoznać tylko wtedy, gdy chce. Aby nie denerwować, nie ingerować i nie odwracać uwagi od głównej treści, etykietka musi spełniać szereg wymagań:
Możliwość tworzenia podpowiedzi jest osadzona w języku znaczników hipertekstowych dla stron internetowych. Początkowo miał na celu rozszyfrowanie skrótów i złożonych terminów naukowych.
Aby utworzyć taki wyskakujący blok, potrzebujesz atrybutu title, który jest dostępny dla dowolnego znacznika HTML.
Proxima Centauri znajduje się w przybliżeniu4.22
rok świetlny
z Ziemi, która jest 270 tysięcy razy większa niż odległość Ziemi od Słońca.
Główne zalety podpowiedzi HTML: łatwość użycia i możliwość korzystania z dowolnych elementów układu - od tekstu po obrazy. Ale ma też duże wady:
Atrybut tytułu HTML nadaje się tylko do małych podpowiedzi, które nie wymagają specjalnego projektu. W przeciwnym razie warto wiedzieć, jak tworzyć podpowiedzi za pomocą CSS.
Możesz stworzyć piękny niestandardowy blok podpowiedzi za pomocą kaskadowych arkuszy stylów. Wykorzystywane są podstawowe pojęcia CSS:
pokaz;: unosić sięktóry jest przypisany do dowolnego elementu pod kursorem myszy;: przed i : poktóre można wykorzystać do prostych wskazówek, aby nie tworzyć osobnego elementu HTML;Wszystkie te właściwości są dobrze obsługiwane przez nowoczesne przeglądarki, co zapewnia niezawodne działanie mechanizmu podpowiedzi.
Pseudoklasa : unosić sięOprócz najechania myszą reaguje również na dotyk palca na ekranie dotykowym, co pozwala na obsługę gadżetów mobilnych.
Etykietka CSS może być albo oddzielnym blokiem HTML z własną strukturą, albo pseudoelementem innego bloku. Każda z tych opcji ma swoje zalety i wady, które należy wziąć pod uwagę.
W oddzielnym kontenerze znacznie łatwiej jest manipulować zawartością. Możesz umieszczać w nim obrazy, nagłówki i inne elementy.
Pseudoelement pozwala pozbyć się niepotrzebnegobloki i ułatwiają układ. Treść tekstowa może być umieszczona w atrybucie elementu docelowego i nie martw się samym tworzeniem podpowiedzi, CSS zrobi wszystko. Jednak pseudoelement jest słabo dostosowany do bloku o złożonej strukturze. Ponadto można go tworzyć tylko do zamykania tagów. Nie można dołączyć takiej etykiety narzędzi bezpośrednio do obrazu.
Stworzymy pięknie zaprojektowaną etykietkę ze złożoną strukturą dla najbliższej nam gwiazdy z gwiazdozbioru Centaurus.
Przede wszystkim zdefiniujmy znaczniki HTML:
Gwiazdy konstelacji Centaurus
Alpha Centauri
Beta Centauri
Theta Centauri
Gamma Centauri
Epsilon Centauri
Proxima Centauri
Proxima Centaurus (z łac. Proxima - najbliższy) to czerwony karzeł należący do układu gwiezdnego Alpha Centauri, najbliżej Ziemi po Słońcu.
Udekoruj i ukryj blok podpowiedzi za pomocą CSS:
.star {
pozycja:krewny;
}
/ * style podpowiedzi * /
.star .tooltip {
Nie wyświetla się;
pozycja: absolutna;
góra: 50%;
transform: translateY (-50%);
po lewej: 100%;
}
/ * style dla ozdobnego trójkąta * /
.star .tooltip: przed {...}
/ * wskazówka po najechaniu * /
.star: hover .tooltip {display: block; }
Style listy i samej podpowiedzi mogą być dowolne, zostały one pominięte ze względu na zwięzłość.
Umieszczenie podpowiedzi w osobnym bloku pozwala na użycie w niej obrazów, sformatowanie tekstu, a nawet tworzenie pseudoelementów dla uzyskania pięknego projektu.
Zademonstruj tworzenie podpowiedziw pseudoelementie pomoże panel edytora graficznego. Każde narzędzie jest przedstawione w postaci ikony, której cel może być niedoświadczony dla niedoświadczonego użytkownika. Aby nikt nie był niezadowolony, dodaj ikony z nazwami do ikon.
Kod HTML panelu będzie wyglądał następująco:
Unikalna nazwa narzędzia znajduje się w atrybucie etykietka danych. Wewnątrz bloku znajduje się ikona, ale w etykiecie HTML brakuje samej podpowiedzi.
Ponieważ podpowiedź będzie zawierać tylko krótki tekst objaśniający, możesz używać pseudoelementów, aby nie zaśmiecać panelu świetlnego.
/ * ogólne style dla ikony * /
.instrument {
pozycja: względna;
kolor: # 666;
tło: biały;
kursor: wskaźnik;
}
/ * style ikon aktywowania * /
.instrument: hover {
tło: # 666;
kolor biały;
}
/ * style podpowiedzi * /
.instrument: hover: after {
content: attr (data-tooltip);
pozycja: absolutna;
po lewej: 100%;
kolor: # 666;
}Pseudoelement pojawia się tylko po najechaniu kursorem, więc nie ma potrzeby ukrywania go za pomocą display: block. Jego lokalizacja jest regulowana przez właściwości pozycja i lewo / prawo / góra / dół. Aby uzyskać z atrybutu etykietka danych Element treści docelowej podpowiedzi CSS udostępnia funkcję attr (). Style zwięzłe są pomijane dla zwięzłości.
Omówione wcześniej mechanizmy podpowiedzi reagowały na najechanie kursorem na element docelowy i były oparte na pseudoklasie CSS. : unosić się. W niektórych sytuacjach lepiej jest otworzyć podpowiedź po kliknięciu. Podobny efekt jest łatwy do wdrożenia w JavaScript, ale CSS może to zrobić.
Wśród listy pseudoklas CSS znajduje się wspaniała klasa : skupiaćDostępne dla linków i elementów wejściowych. w odróżnieniu : unosić sięktóry znika, gdy tylko kursor opuścimysz, ta pseudoklasa pozwala zapisać stan aktywności elementu docelowego. A jeśli pola wejściowe semantycznie nie są zbyt odpowiednie do tworzenia podpowiedzi, łącza są w porządku.
Zamień element listy z pierwszego przykładu na link:
Proxima Centauri
Proxima Centaurus (z łac. Proxima - najbliższy) to czerwony karzeł należący do układu gwiezdnego Alpha Centauri, najbliżej Ziemi po Słońcu.
Atrybut href z wartością javascript: void (0) konieczne, aby zapobiec reakcji przeglądarki na kliknięcie linku.
Poniższe style umożliwiają wywołanie podpowiedzi z opisem gwiazdy poprzez kliknięcie:
.star .tooltip {
Nie wyświetla się;
}
.star: focus .tooltip {
Blok wyświetlacza;
}Link będzie aktywny, dopóki użytkownik nie kliknie w dowolnym miejscu na stronie.
Tak więc podpowiedź na stronie można utworzyć na wiele sposobów, nawet bez użycia JavaScript. Każdy z nich jest dobry, wystarczy wybrać najbardziej odpowiedni dla konkretnej sytuacji.
