Softonic

Generator podpowiedzi CSS

Krok 1 / 2
Dalej

Podpowiedzi (tooltipy) to często pierwsze miejsce, w którym projekt sięga po bibliotekę JavaScript, choć prosty pseudoelement ::after sterowany atrybutem data-tooltip pokrywa 90% rzeczywistych przypadków. Ten generator zwraca dokładnie te reguły .tooltip i .tooltip::after, których potrzebujesz: wybierz położenie u góry, u dołu, po lewej lub po prawej, dostosuj kolor tła i tekstu, a następnie skopiuj blok do swojego arkusza stylów.

Jak podłączyć podpowiedź do swojego kodu HTML

  1. 1

    Wybierz położenie

    Góra, dół, lewo lub prawo. Generator używa `calc(100% + 8px)` w połączeniu z odpowiednim transformem, dzięki czemu dymek przylega ściśle do elementu wyzwalającego.

  2. 2

    Wybierz kolory

    Kolor tła jest stosowany do dymka, a kolor tekstu do etykiety podpowiedzi. Aby zapewnić czytelność, utrzymuj kontrast na poziomie 4,5:1 lub wyższym.

  3. 3

    Skopiuj kod CSS

    Wklej wygenerowany blok do swojego arkusza stylów. Zawiera on reguły `.tooltip`, `.tooltip::after` oraz `:hover`.

  4. 4

    Dodaj znaczniki do elementu wyzwalającego

    Dodaj `class="tooltip" data-tooltip="Twój tekst"` do dowolnego elementu. Pseudoelement `::after` odczytuje atrybut za pomocą `content: attr(data-tooltip)`.

Podpowiedzi w czystym CSS: co zyskujesz, a z czego rezygnujesz

Podpowiedź oparta wyłącznie na CSS jest niewielka, szybka i działa nawet przy wyłączonym JavaScripcie. Znajduje się jednak w kolejności źródłowej DOM i dlatego dziedziczy pewne ograniczenia, które trzeba uwzględnić w projekcie.

Co robi wygenerowany kod CSS

  • Ustawia element wyzwalający na position: relative, aby pozycjonowana absolutnie podpowiedź była do niego przytwierdzona.
  • Pobiera etykietę z content: attr(data-tooltip), dzięki czemu nigdy nie duplikujesz tekstu.
  • Animuje przezroczystość za pomocą transition: opacity 0.15s, dzięki czemu podpowiedź pojawia się szybko, ale nie gwałtownie.
  • Stosuje pointer-events: none na dymku, aby nigdy nie blokował kliknięć w element wyzwalający.

Obliczanie położenia

Położenie Reguła przesunięcia
góra bottom: calc(100% + 8px); left: 50%; translateX(-50%)
dół top: calc(100% + 8px); left: 50%; translateX(-50%)
lewo right: calc(100% + 8px); top: 50%; translateY(-50%)
prawo left: calc(100% + 8px); top: 50%; translateY(-50%)

Uwagi dotyczące dostępności

  • data-tooltip nie jest odczytywany przez czytniki ekranu. Jeśli informacja jest istotna, połącz ją z aria-label lub widocznym tekstem.
  • Użytkownicy klawiatury potrzebują nie tylko :hover, ale też :focus-visible. Rozszerz wygenerowaną regułę do .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Podpowiedzi przycięte przez overflow: hidden na elemencie nadrzędnym znikną. Przenieś element wyzwalający poza kontener przycinający lub przełącz się na popover renderowany przez JavaScript w gęstych interfejsach.

Najczęściej zadawane pytania

Pseudoelement utrzymuje porządek w DOM, pozwala uniknąć duplikowania tekstu etykiety i umożliwia stylizowanie podpowiedzi bez obawy o przypadkowe dopasowanie do innych elementów. Kosztem jest to, że zawartość ::after nie może być indeksowana przez technologie wspomagające, dlatego kluczowy tekst wzmocnij za pomocą aria-label.

Tak, dodaj drugi pseudoelement, na przykład .tooltip::before, uformowany jako prostokąt o zerowej szerokości i wysokości z kolorowymi obramowaniami. To klasyczna sztuczka rysowania trójkąta w CSS; towarzyszące narzędzie CSS Triangle Generator z tego zestawu generuje dokładnie te deklaracje obramowań, których potrzebujesz.

Dodaj transition-delay: 0.3s do reguły ::after, ale zresetuj je do zera po zjechaniu kursorem; albo użyj transition: opacity 0.15s 0.3s;, aby opóźnić pojawienie się bez opóźniania zniknięcia.

Wybrane położenie i kolory są wysyłane na nasz serwer w celu wygenerowania CSS, ale nie są przechowywane ani ponownie wykorzystywane. Na stronie wieloetapowej wędrują w linku między krokami; w widoku jednostronicowym nic nie jest zachowywane.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Ściągawka do Markdown

Praktyczna ściągawka Markdown z prawdziwym podglądem i przykładami gotowymi do skopiowania: nagłówki, listy, tabele, kod, linki, obrazy i składnia GFM.

Symulator licznika rozkazów

Śledź uproszczony listing instrukcji o stałej długości z etykietami, skokami, wywołaniami, powrotami i adresami 16-, 24- lub 32-bitowymi.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Narzędzie jest dostępne w innych językach