Generator tooltipów CSS
Twórz czysty kod CSS tooltipów: hover, focus, click. Wybierz pozycję (top/bottom/left/right), kolor, animację i skopiuj gotowy kod. Zero JavaScript, działa w każdej przeglądarce.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
/* Wynik generatora tooltipów CSS */
.ttg-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:help;line-height:1.2;gap:.4rem;}
.ttg-trigger:focus{outline:0;}
.ttg-trigger:focus-visible{outline:2px solid rgba(13,110,253,.5);outline-offset:3px;border-radius:6px;}
.ttg-trigger[data-ttg="1"]::after{content:attr(data-tooltip);position:absolute;max-width:280px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.35;white-space:normal;opacity:0;pointer-events:none;transform:translate3d(0,0,0) scale(.98);transition:opacity .16s ease, transform .16s ease;z-index:10;box-shadow:0 12px 26px rgba(0,0,0,.18);}
.ttg-trigger[data-theme="dark"]::after{background:#111827;color:#F9FAFB;border:1px solid rgba(255,255,255,.08);}
.ttg-trigger[data-theme="light"]::after{background:#FFFFFF;color:#111827;border:1px solid rgba(17,24,39,.12);}
.ttg-trigger[data-ttg="1"]:hover::after,.ttg-trigger[data-ttg="1"]:focus::after,.ttg-trigger[data-ttg="1"]:focus-visible::after{opacity:1;transform:translate3d(0,0,0) scale(1);}
.ttg-trigger[data-pos="top"]::after{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px) scale(.98);}
.ttg-trigger[data-pos="top"]:hover::after,.ttg-trigger[data-pos="top"]:focus::after,.ttg-trigger[data-pos="top"]:focus-visible::after{transform:translateX(-50%) translateY(0) scale(1);}
.ttg-trigger[data-pos="bottom"]::after{left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-6px) scale(.98);}
.ttg-trigger[data-pos="bottom"]:hover::after,.ttg-trigger[data-pos="bottom"]:focus::after,.ttg-trigger[data-pos="bottom"]:focus-visible::after{transform:translateX(-50%) translateY(0) scale(1);}
.ttg-trigger[data-pos="right"]::after{left:calc(100% + 10px);top:50%;transform:translateX(-6px) translateY(-50%) scale(.98);}
.ttg-trigger[data-pos="right"]:hover::after,.ttg-trigger[data-pos="right"]:focus::after,.ttg-trigger[data-pos="right"]:focus-visible::after{transform:translateX(0) translateY(-50%) scale(1);}
.ttg-trigger[data-pos="left"]::after{right:calc(100% + 10px);top:50%;transform:translateX(6px) translateY(-50%) scale(.98);}
.ttg-trigger[data-pos="left"]:hover::after,.ttg-trigger[data-pos="left"]:focus::after,.ttg-trigger[data-pos="left"]:focus-visible::after{transform:translateX(0) translateY(-50%) scale(1);}
.ttg-trigger[data-ttg="1"][data-arrow="1"]::before{content:"";position:absolute;width:10px;height:10px;opacity:0;pointer-events:none;transform:translate3d(0,0,0) rotate(45deg);transition:opacity .16s ease, transform .16s ease;z-index:9;}
.ttg-trigger[data-ttg="1"][data-arrow="1"]:hover::before,.ttg-trigger[data-ttg="1"][data-arrow="1"]:focus::before,.ttg-trigger[data-ttg="1"][data-arrow="1"]:focus-visible::before{opacity:1;}
.ttg-trigger[data-theme="dark"][data-arrow="1"]::before{background:#111827;border:1px solid rgba(255,255,255,.08);}
.ttg-trigger[data-theme="light"][data-arrow="1"]::before{background:#FFFFFF;border:1px solid rgba(17,24,39,.12);}
.ttg-trigger[data-pos="top"][data-arrow="1"]::before{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) rotate(45deg);}
.ttg-trigger[data-pos="bottom"][data-arrow="1"]::before{left:50%;top:calc(100% + 6px);transform:translateX(-50%) rotate(45deg);}
.ttg-trigger[data-pos="right"][data-arrow="1"]::before{left:calc(100% + 6px);top:50%;transform:translateY(-50%) rotate(45deg);}
.ttg-trigger[data-pos="left"][data-arrow="1"]::before{right:calc(100% + 6px);top:50%;transform:translateY(-50%) rotate(45deg);}
@media (prefers-reduced-motion: reduce){.ttg-trigger[data-ttg="1"]::after{transition:none;}.ttg-trigger[data-ttg="1"][data-arrow="1"]::before{transition:none;}}
<!-- HTML -->
<span class="ttg-trigger" tabindex="0" data-ttg="1" data-tooltip="Skopiuj CSS i HTML, a następnie użyj tego tooltipa w dowolnym miejscu." data-pos="top" data-theme="dark" data-arrow="1">Najedź lub kliknij mnie</span>
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator tooltipów CSS – dymki podpowiedzi bez JavaScript
Tooltips (dymki podpowiedzi) informują użytkownika o funkcji elementu bez zajmowania miejsca w interfejsie. Narzędzie generuje czysty, gotowy do wklejenia kod CSS tooltipów – wybierasz pozycję, kolor, animację wejścia i styl obramowania. Bez JavaScript, bez zewnętrznych bibliotek, kompatybilne z każdą przeglądarką obsługującą CSS3.
Pozycje i kierunki tooltipów
Tooltip można umieścić w czterech kierunkach: top (nad elementem), bottom (pod), left (po lewej), right (po prawej). Zaawansowane warianty: top-left, top-right (tooltip zakotwiczony narożnikowo). Strzałka kierunkowa (::before) automatycznie obraca się do właściwego kierunku za pomocą border-trick.
Animacje wejścia i wyjścia
Fade-in (opacity: 0→1 + transition): subtelne pojawienie się. Slide (translateY/translateX): tooltip wysuwa się z kierunku wskazania. Scale (transform: scale(0.8)→1): efekt "pop". Opóźnienie (transition-delay): prevents flickering przy szybkim ruchu myszy nad elementem.
Dostępność i atrybuty ARIA
Tooltip CSS nie zastępuje natywnego atrybutu title – uzupełnia go. Dla dostępności: rola role="tooltip" na elemencie dymka, aria-describedby łączące trigger z tooltipem, widoczność przy focus (nie tylko hover) dla użytkowników klawiatury. Kontrast tła/tekstu: minimum 4.5:1 (WCAG AA).
Personalizacja stylów
Kolor tła: dowolny HEX/RGB/CSS variable. Kolor tekstu: kontrastowy. Zaokrąglenie rogów (border-radius): 4px (prostokąt), 8px (zaokrąglony), 50px (pigułka). Cień (box-shadow): głębokość i kolor. Maksymalna szerokość (max-width): 200-300px z word-break. Font-size: 12-14px dla czytelności.
Najczęstsze pytania
Czy tooltip CSS działa na urządzeniach dotykowych?
Hover nie istnieje na touch – tooltip jest niewidoczny na smartfonach bez dodatkowej obsługi JS. Alternatywne podejście: użyj :focus-visible (po tapnięciu) lub dodaj małą ikonkę ⓘ jako trigger z aria-expanded. Na mobile lepiej sprawdza się bottom sheet lub popover.
Jak zrobić tooltip z HTML wewnątrz (rich tooltip)?
Czysty CSS nie pozwala na interaktywną treść w tooltipie (linki, przyciski). Do rich tooltipów użyj CSS Popover API (nowość 2024, natywny HTML), Floating UI (JS), lub Radix UI Tooltip (React). Prosty HTML (span wewnątrz ::after) jest możliwy przez attr() ale z ograniczeniami.
Jaka jest różnica między tooltip a popover?
Tooltip: krótka podpowiedź (1-2 słowa), pojawia się tylko przy hover/focus, nie jest interaktywny. Popover: większa pływająca warstwa, może zawierać przyciski, pola formularzy i linki, wymaga kliknięcia. CSS Popover API (Chrome 114+) obsługuje oba natywnie.
Jak uniknąć ucinania tooltipów na krawędzi ekranu?
Problem: tooltip pozycjonowany absolute może wychodzić poza viewport. Rozwiązania CSS: overflow: visible na rodzicu, position: fixed (ale traci kontekst scrollowania). Dla niezawodnej pozycji używaj Floating UI lub nowego CSS Anchor Positioning (2024).
Czy tooltip wpływa na SEO?
Treść wygenerowana przez CSS ::after/content nie jest indeksowana przez Google. Jeśli tooltip zawiera ważne informacje SEO – umieść je w HTML (np. w ukrytym span) lub użyj atrybutu title. Tooltips służą UX, nie są nośnikiem treści SEO.
Powiązane narzędzia: generator animacji CSS, piaskownica Flexbox i generator gradientów CSS.