Narzędzia - Projektowanie Stron
Generator Tooltipa
Darmowy generator podpowiedzi (tooltipów) do stron internetowych. Konfiguruj pozycję, animację, motyw i opóźnienie - generuj gotowy kod HTML, CSS i JavaScript bez bibliotek.
Presety
Tooltip z nagłówkiem i dłuższym opisem
Tooltip nie znika gdy najeżdżasz na niego kursorem
<!-- Trigger element -->
<button
id="tooltip-trigger"
class="tooltip-trigger"
type="button"
aria-describedby="my-tooltip"
>Najedź na mnie</button>
<!-- Tooltip element -->
<div
id="my-tooltip"
class="tooltip tooltip--top"
role="tooltip"
aria-hidden="true"
>
To jest przykładowy tooltip dla strony internetowej
<span class="tooltip__arrow" aria-hidden="true"></span>
</div>tooltip-wrapper, dodaj wygenerowany CSS do arkusza stylów, a JS do pliku skryptów lub jako <script> przed </body>.[ Dobre praktyki ]
Jakużywaćtooltipównastronachinternetowych
Sześć zasad projektowania efektywnych podpowiedzi UI w nowoczesnych stronach internetowych
Kiedy używać tooltipów
Tooltipy sprawdzają się dla ikon bez etykiet (ikony akcji, przyciski narzędziowe), skrótów klawiszowych, dodatkowego kontekstu dla zaawansowanych użytkowników. Przy projektowaniu stron internetowych unikaj tooltipów dla krytycznych informacji - użytkownik może ich nie znaleźć.
Dostępność (Accessibility)
Każdy tooltip musi mieć role="tooltip" i być połączony z triggerem przez aria-describedby. Trigger powinien być dostępny z klawiatury (tabindex="0" lub natywny element focousalny). Treść tooltipa musi mieć kontrast minimum 4.5:1. To wymóg WCAG 2.1 AA przy tworzeniu stron internetowych.
Mobilne urządzenia
Na urządzeniach dotykowych hover nie istnieje. Zmień trigger na "click" lub rozważ alternatywę: inline help text, bottom sheet, lub expandable text. Tooltipy aktywowane hoverm są niewidoczne dla użytkowników mobile - pamiętaj o tym przy tworzeniu stron internetowych responsywnych.
Długość treści
Tooltip to max 1-2 krótkie zdania (do ~80 znaków). Dłuższa treść powinna trafić do popover, aside lub sekcji pomocy. Rich content (tytuł + opis) może być nieco dłuższy, ale nadal zwięzły. Przy projektowaniu stron - im krótszy tooltip, tym lepszy UX.
Pozycjonowanie
Domyślna pozycja "top" jest najczęstsza. Implementuj auto-positioning wykrywający kolizje z krawędzią viewportu. Wygenerowany JS ustawia preferowaną pozycję - przy produkcji warto dodać detekcję kolizji z getBoundingClientRect(). Standardowe podejście przy tworzeniu stron internetowych.
Wydajność
Tooltip z czystym CSS i minimalnym JS nie wpływa na wydajność strony. Unikaj tworzenia elementów DOM przy każdym showm - lepiej jeden element zmieniający klasę. Wygenerowany kod używa tego podejścia. Dla dużej liczby tooltipów rozważ delegację zdarzeń dla lepszej wydajności stron internetowych.
Tooltipy w projektowaniu stron internetowych
Generator tooltipa to darmowe narzędzie online dla web developerów i designerów zajmujących się tworzeniem stron internetowych. Tooltip (podpowiedź) to fundamentalny element UI - mały, kontekstowy komunikat wyświetlany po interakcji użytkownika z elementem interfejsu.
Przy projektowaniu stron internetowych tooltipy pełnią rolę pomocy kontekstowej: wyjaśniają ikony bez etykiet, opisują skróty klawiaturowe, dostarczają dodatkowego kontekstu bez zaśmiecania interfejsu. Dobrze zaprojektowany tooltip jest niewidoczny dla zaawansowanych użytkowników, a nieoceniony dla nowych.
Studio Kalmus tworzy strony internetowe dla firm z Góry Kalwarii i całej Polski, dbając o szczegóły UX takie jak właśnie tooltipy. Każde narzędzie w naszym generatorze odzwierciedla standardy stosowane w profesjonalnym tworzeniu stron internetowych.
Tooltip bez bibliotek - czysty HTML, CSS i JS
Wygenerowany kod nie wymaga żadnych zewnętrznych bibliotek - to czysty vanilla JavaScript z CSS transitions. Podejście to jest idealne przy tworzeniu stron internetowych, gdzie zależy nam na minimalnym rozmiarze bundle i maksymalnej kontroli nad kodem.
Kod zawiera: pełne pozycjonowanie CSS, animacje transitions, obsługę opóźnień show/hide, atrybuty ARIA dla dostępności (role="tooltip", aria-describedby), zamykanie klawiszem Escape i obsługę kliknięcia poza tooltip. Wszystkie te elementy są standardem w profesjonalnym projektowaniu stron internetowych.
Eksportuj kod w trzech plikach: HTML (struktura), CSS (style + animacje), JavaScript (logika show/hide). Gotowe do wklejenia w każdą stronę internetową - WordPress, Next.js, statyczny HTML lub dowolny inny framework.
[ FAQ ]
Częstozadawanepytania
Odpowiedzi na najczęstsze pytania o tooltipy i tworzenie stron internetowych
Studio Kalmus
Potrzebujesz profesjonalnej strony internetowej?
Studio Kalmus z Góry Kalwarii tworzy nowoczesne strony internetowe dla firm z całej Mazowsza i Polski. Skontaktuj się z nami i dowiedz się, jak możemy wesprzeć Twój biznes online.