Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Tooltip-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Tooltip mit Platzierung oben, unten, links und rechts. Farbvarianten, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Tooltip-Komponenten zeigen zusätzliche Informationen an, wenn Benutzer mit der Maus über ein Element fahren oder darauf fokussieren. Mit semantischen HTML-Attributen und CSS erstellte Tooltips verbessern die Benutzererfahrung, indem sie kontextspezifische Hilfe bereitstellen, ohne die Benutzeroberfläche zu überladen. Das Frutjam-Tooltip-System unterstützt mehrere Positionen, benutzerdefinierte Inhalte und reibungslose Animationen für eine nahtlose Informationserkennung.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Hinweis: Tooltips basieren auf :hover und :focus, die auf Touch-/Mobilgeräten nicht verfügbar sind. Verwenden Sie für Mobile-First-Layouts die responsive Variante lg:tooltip, damit der Tooltip nur auf dem Desktop (große Bildschirme und höher) aktiviert wird. Erwägen Sie auf kleineren Bildschirmen die Verwendung eines anderen Offenlegungsmusters, z. B. eines Popover oder eines modalen.

Klasse Typ Beschreibung
tooltipBaseWrapper, der den Inhalt von Datentipps beim Hover/Fokus anzeigt
tooltip-contentModifikatorBenutzerdefinierter HTML-Inhalt innerhalb der Tooltip-Blase
tooltip-topModifikatorÖffnet über dem Auslöser (Standard)
tooltip-bottomModifikatorÖffnet sich unterhalb des Auslösers
tooltip-leftModifikatorÖffnet sich links vom Abzug
tooltip-rightModifikatorÖffnet sich rechts vom Auslöser
tooltip-startModifikatorÖffnet zur logischen Startseite
tooltip-endModifikatorÖffnet zur logischen Endseite
tooltip-primaryFarbeFarbblase des Hauptthemas
tooltip-secondaryFarbeSekundärthema-Farbblase
tooltip-accentFarbeAkzentthema-Farbblase
tooltip-neutralFarbeFarbblase mit neutralem Thema
tooltip-infoFarbeInfo semantische Farbblase
tooltip-successFarbeErfolgssemantische Farbblase
tooltip-warningFarbeWarnende semantische Farbblase
tooltip-errorFarbeFehlersemantische Farbblase

Tooltip

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>

Benutzerdefinierter Tooltip-Inhalt

❤️
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>

Tooltip mit Symbol

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>

Tooltip zum Öffnen erzwingen

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

Tooltip-Positionierungsoptionen

Top-Platzierung

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

Richtige Platzierung

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

Platzierung beenden

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

Untere Platzierung

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

Linke Platzierung

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

Beginnen Sie mit der Platzierung

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

Tooltip-Farbvarianten

Grundfarbe

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

Sekundärfarbe

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

Akzentfarbe

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

Infofarbe

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

Erfolgsfarbe

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

Warnfarbe

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

Fehlerfarbe

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

Neutrale Farbe

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

Responsive Tooltips

Nur auf großen Bildschirmen mit lg:tooltip anzeigen

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

JS & React Helper

Verwenden Sie createTooltip aus frutjam/js oder useTooltip aus frutjam/react, um einen Tooltip programmgesteuert ein- oder auszublenden – nützlich für geführte Touren oder ausgelöste Hilfetexte.

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

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Tooltip-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP