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

Komponent podpowiedzi

Ostatnia aktualizacja:

Etykietka CSS Tailwind zawierająca wyłącznie CSS z rozmieszczeniem u góry, u dołu, po lewej i prawej stronie. Warianty kolorystyczne, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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

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>
    </>
  )
}

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Etykietka. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP