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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator OpenAPI

Wklej dokument OpenAPI lub Swagger w JSON albo YAML i sprawdź jego podstawową strukturę: pole wersji, obiekt info i paths, z czytelnymi błędami i ostrzeżeniami.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Kreator diagramów ERD

Utwórz lokalnie diagram encja-relacja z maksymalnie 12 encjami, polami, relacjami i licznościami. Eksportuj Mermaid, SVG, PNG lub JSON.

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