---
title: "Tooltip"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Tooltip with multiple placements and color variants. Accessible hover and focus hints for UI guidance—no JavaScript required."
url: https://frutjam.com/pl/components/tooltip
---

# Tooltip Component

Komponenty podpowiedzi wyświetlają dodatkowe informacje, gdy użytkownik najedzie kursorem na element lub skupi się na nim. Zbudowane z semantycznych atrybutów HTML i CSS, podpowiedzi zwiększają wygodę użytkownika, zapewniając pomoc kontekstową bez zaśmiecania interfejsu. System podpowiedzi Frutjam obsługuje wiele pozycji, niestandardową treść i płynne animacje, co pozwala na bezproblemowe odkrywanie informacji.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

**Uwaga:** podpowiedzi opierają się na `:hover` i `:focus`, które **nie są dostępne na urządzeniach dotykowych/mobilnych**. W przypadku układów dostosowanych do urządzeń mobilnych użyj responsywnego wariantu `lg:tooltip`, aby podpowiedź była aktywowana tylko na komputerze (duże ekrany i większe). Na mniejszych ekranach rozważ użycie innego wzorca ujawniania, takiego jak [popover](https://frutjam.com/components/popover) lub [modal](https://frutjam.com/components/modal).

| Klasa             | Typ         | Opis                                                                   |
| ----------------- | ----------- | ---------------------------------------------------------------------- |
| tooltip           | Opierać     | Opakowanie ujawniające treść `data-tip` po najechaniu kursorem/fokusem |
| tooltip-content   | Modyfikator | Niestandardowa treść HTML w dymku podpowiedzi                          |
| tooltip-top       | Modyfikator | Otwiera się nad spustem (domyślnie)                                    |
| tooltip-bottom    | Modyfikator | Otwiera się poniżej spustu                                             |
| tooltip-left      | Modyfikator | Otwiera się na lewo od spustu                                          |
| tooltip-right     | Modyfikator | Otwiera się na prawo od spustu                                         |
| tooltip-start     | Modyfikator | Otwiera się na logiczną stronę startową                                |
| tooltip-end       | Modyfikator | Otwiera się na logiczną stronę końcową                                 |
| tooltip-primary   | Kolor       | Podstawowy motyw kolorowej bańki                                       |
| tooltip-secondary | Kolor       | Kolorowa bańka motywu drugorzędnego                                    |
| tooltip-accent    | Kolor       | Bańka koloru motywu akcentującego                                      |
| tooltip-neutral   | Kolor       | Neutralna bańka w kolorze motywu                                       |
| tooltip-info      | Kolor       | Informacje semantyczna kolorowa bańka                                  |
| tooltip-success   | Kolor       | Sukces semantyczna kolorowa bańka                                      |
| tooltip-warning   | Kolor       | Ostrzeżenie semantyczna kolorowa bańka                                 |
| tooltip-error     | Kolor       | Błąd semantycznej kolorowej bańki                                      |

## Etykietka

## Niestandardowa treść podpowiedzi

```html
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>
```

## Etykietka z ikoną

```html
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>
```

## Wymuś otwarcie podpowiedzi

```html
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>
```

## Opcje pozycjonowania podpowiedzi

### Najlepsze miejsce

```html
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>
```

### Właściwe umiejscowienie

```html
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>
```

### Zakończ umieszczanie

```html
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>
```

### Dolne umiejscowienie

```html
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>
```

### Lewe miejsce docelowe

```html
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>
```

### Rozpocznij umieszczanie

```html
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>
```

## Warianty kolorów podpowiedzi

### Kolor podstawowy

```html
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>
```

### Kolor wtórny

```html
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>
```

### Kolor akcentujący

```html
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>
```

### Kolor informacyjny

```html
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>
```

### Kolor sukcesu

```html
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>
```

### Kolor ostrzegawczy

```html
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>
```

### Kolor błędu

```html
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>
```

### Neutralny kolor

```html
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>
```

## Responsywne podpowiedzi

Wyświetlaj tylko na dużych ekranach z `lg:tooltip`

```html
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>
```

## Pomocnik JS i reagowania

Użyj `createTooltip` z `frutjam/js` lub `useTooltip` z `frutjam/react`, aby programowo pokazać lub ukryć podpowiedź - przydatne w przypadku wycieczek z przewodnikiem lub uruchamianego tekstu pomocy.