Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Tooltip Component

CSS-only Tailwind CSS tooltip with top, bottom, left, and right placement. Color variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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 lub modal.

Klasa Typ Opis
tooltipOpieraćOpakowanie ujawniające treść data-tip po najechaniu kursorem/fokusem
tooltip-contentModyfikatorNiestandardowa treść HTML w dymku podpowiedzi
tooltip-topModyfikatorOtwiera się nad spustem (domyślnie)
tooltip-bottomModyfikatorOtwiera się poniżej spustu
tooltip-leftModyfikatorOtwiera się na lewo od spustu
tooltip-rightModyfikatorOtwiera się na prawo od spustu
tooltip-startModyfikatorOtwiera się na logiczną stronę startową
tooltip-endModyfikatorOtwiera się na logiczną stronę końcową
tooltip-primaryKolorPodstawowy motyw kolorowej bańki
tooltip-secondaryKolorKolorowa bańka motywu drugorzędnego
tooltip-accentKolorBańka koloru motywu akcentującego
tooltip-neutralKolorNeutralna bańka w kolorze motywu
tooltip-infoKolorInformacje semantyczna kolorowa bańka
tooltip-successKolorSukces semantyczna kolorowa bańka
tooltip-warningKolorOstrzeżenie semantyczna kolorowa bańka
tooltip-errorKolorBłąd semantycznej kolorowej bańki

Etykietka

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

Niestandardowa treść podpowiedzi

❤️
Like
html 
1
2
3
4
5
6
7
<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 
1
2
3
4
5
6
<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 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

Opcje pozycjonowania podpowiedzi

Najlepsze miejsce

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

Właściwe umiejscowienie

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

Zakończ umieszczanie

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

Dolne umiejscowienie

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

Lewe miejsce docelowe

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

Rozpocznij umieszczanie

html 
1
2
3
<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 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

Kolor wtórny

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

Kolor akcentujący

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

Kolor informacyjny

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

Kolor sukcesu

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

Kolor ostrzegawczy

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

Kolor błędu

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

Neutralny kolor

html 
1
2
3
<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 
1
2
3
<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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}