Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Popover-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Popover unter Verwendung der nativen Popover-API. Schwebendes Inhaltsfeld für Tooltips und Dropdowns. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Popover-Komponenten zeigen kontextbezogene Inhalte neben Triggerelementen an, ohne permanenten Bildschirmplatz zu belegen. Das Frutjam-Popover-System basiert auf der nativen HTML-Popover-API und unterstützt Klick- und Hover-Trigger, anpassbare Positionierung und flüssige Animationen. Perfekt für Dropdown-Menüs, Kontextmenüs, Benutzerprofilmenüs und zusätzliche Optionen ohne Seitennavigation.

Nur CSS, kein JavaScript erforderlich – erstellen Sie barrierefreie Dropdown-Menüs und kontextbezogene Overlays mit reinem HTML und Tailwind CSS. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
popoverBaseWrapper, der Trigger und Inhalt miteinander verankert
popover-contentModifikatorSchwebendes Panel wird angezeigt, wenn das Popover geöffnet ist
popover-toggleModifikatorAuslöseelement, das das Popover öffnet/schließt
popover-hoverModifikatorWird beim Hover statt beim Klicken geöffnet
popover-top-startModifikatorOben positioniert, auf den Start ausgerichtet
popover-top-centerModifikatorOben positioniert, zentriert
popover-top-endModifikatorOben positioniert, zum Ende hin ausgerichtet
popover-bottom-startModifikatorUnten positioniert, am Anfang ausgerichtet
popover-bottom-centerModifikatorUnten positioniert, zentriert
popover-bottom-endModifikatorUnten positioniert, am Ende ausgerichtet
popover-start-topModifikatorNach links positioniert, nach oben ausgerichtet
popover-start-centerModifikatorLinks positioniert, vertikal zentriert
popover-start-bottomModifikatorNach links positioniert, nach unten ausgerichtet
popover-end-topModifikatorNach rechts positioniert, nach oben ausgerichtet
popover-end-centerModifikatorRechts positioniert, vertikal zentriert
popover-end-bottomModifikatorNach rechts positioniert, nach unten ausgerichtet

Grundlegende Verwendung

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover">
  <button popovertarget="defaultClickPopover" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="defaultClickPopover">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div className="popover">
  <button popovertarget="defaultClickPopover" type="button" className="popover-toggle btn">Click here</button>
  <div tabIndex="0" className="popover-content" popover id="defaultClickPopover">
      <ul className="menu">
        <li>
          <a className="menu-item">About Us</a>
        </li>
        <li>
          <a className="menu-item">Contact Us</a>
        </li>
        <li>
          <a className="menu-item">Career</a>
        </li>
        <li>
          <a className="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Dropdown-Menü

Verwenden Sie die Popover-Komponente, um Dropdown-Menüs zu erstellen – Navigations-Dropdowns, Benutzerprofilmenüs und Aktionsmenüs – alles nur CSS, ohne dass JavaScript erforderlich ist.

Dropdown-Menü in der Navigationsleiste

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="popover">
  <button popovertarget="navDropdown" type="button" class="popover-toggle btn btn-ghost">
    Products
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
  </button>
  <div tabindex="0" class="popover-content" popover id="navDropdown">
    <ul class="menu">
      <li><a class="menu-item">Components</a></li>
      <li><a class="menu-item">Blocks</a></li>
      <li><a class="menu-item">Templates</a></li>
      <li><a class="menu-item">Plugins</a></li>
    </ul>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div className="popover">
  <button popovertarget="navDropdown" type="button" className="popover-toggle btn btn-ghost">
    Products
    <svg xmlns="http://www.w3.org/2000/svg" className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
  </button>
  <div tabIndex="0" className="popover-content" popover id="navDropdown">
    <ul className="menu">
      <li><a className="menu-item">Components</a></li>
      <li><a className="menu-item">Blocks</a></li>
      <li><a className="menu-item">Templates</a></li>
      <li><a className="menu-item">Plugins</a></li>
    </ul>
  </div>
</div>

Dropdown-Liste „Benutzerprofil“.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="popover popover-bottom-end">
  <button popovertarget="profileDropdown" type="button" class="popover-toggle btn btn-ghost p-0">
    <div class="avatar avatar-primary avatar-sm">JD</div>
  </button>
  <div tabindex="0" class="popover-content" popover id="profileDropdown">
    <ul class="menu">
      <li class="menu-title">John Doe</li>
      <li><a class="menu-item">Profile</a></li>
      <li><a class="menu-item">Settings</a></li>
      <li><a class="menu-item">Billing</a></li>
      <li><div class="divider my-0"></div></li>
      <li><a class="menu-item text-error">Sign out</a></li>
    </ul>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div className="popover popover-bottom-end">
  <button popovertarget="profileDropdown" type="button" className="popover-toggle btn btn-ghost p-0">
    <div className="avatar avatar-primary avatar-sm">JD</div>
  </button>
  <div tabIndex="0" className="popover-content" popover id="profileDropdown">
    <ul className="menu">
      <li className="menu-title">John Doe</li>
      <li><a className="menu-item">Profile</a></li>
      <li><a className="menu-item">Settings</a></li>
      <li><a className="menu-item">Billing</a></li>
      <li><div className="divider my-0"></div></li>
      <li><a className="menu-item text-error">Sign out</a></li>
    </ul>
  </div>
</div>

Dropdown mit Symbolen

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="popover">
  <button popovertarget="iconDropdown" type="button" class="popover-toggle btn">
    Actions
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
  </button>
  <div tabindex="0" class="popover-content" popover id="iconDropdown">
    <ul class="menu">
      <li>
        <a class="menu-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
          Edit
        </a>
      </li>
      <li>
        <a class="menu-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
          Duplicate
        </a>
      </li>
      <li><div class="divider my-0"></div></li>
      <li>
        <a class="menu-item text-error">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
          Delete
        </a>
      </li>
    </ul>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div className="popover">
  <button popovertarget="iconDropdown" type="button" className="popover-toggle btn">
    Actions
    <svg xmlns="http://www.w3.org/2000/svg" className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
  </button>
  <div tabIndex="0" className="popover-content" popover id="iconDropdown">
    <ul className="menu">
      <li>
        <a className="menu-item">
          <svg xmlns="http://www.w3.org/2000/svg" className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
          Edit
        </a>
      </li>
      <li>
        <a className="menu-item">
          <svg xmlns="http://www.w3.org/2000/svg" className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
          Duplicate
        </a>
      </li>
      <li><div className="divider my-0"></div></li>
      <li>
        <a className="menu-item text-error">
          <svg xmlns="http://www.w3.org/2000/svg" className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
          Delete
        </a>
      </li>
    </ul>
  </div>
</div>

Popover-Interaktionsverhalten

Standardmäßig werden Klickinteraktionen zum Öffnen und Schließen der Popover-Komponente verwendet. Für Megamenüs können Sie beispielsweise Hover-basierte Interaktion aktivieren, indem Sie die Klasse popover-hover hinzufügen und die Attribute popovertarget und popover entfernen. Dadurch kann das Popover vollständig über die Hover-Logik und nicht über das native Klickverhalten gesteuert werden.

Nativer Klick-Trigger

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover">
  <button popovertarget="nativeClickTrigger" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="nativeClickTrigger">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Hover-Interaktionslogik

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-hover">
  <button type="button" class="popover-toggle btn">Hover me</button>
  <div class="popover-content">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Positionierungsoptionen (Oben, Unten, Anfang, Ende)

Positionieren Sie Ihre Popovers relativ zu ihren Auslöseelementen mithilfe unserer flexiblen Platzierungslogik. Die Popover-Platzierung wird durch die Kombination vertikaler (oben, Mitte, unten) und horizontaler (Anfang, Mitte, Ende) Ausrichtungsoptionen erstellt.

Top-Start-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-top-start">
  <button popovertarget="popoverTopStart" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopStart">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Position oben in der Mitte

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-top-center">
  <button popovertarget="popoverTopCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Position am oberen Ende

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-top-end">
  <button popovertarget="popoverTopEnd" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverTopEnd">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

End-Top-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-end-top">
  <button popovertarget="popoverEndTop" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndTop">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

End-Center-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-end-center">
  <button popovertarget="popoverEndCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

End-Bottom-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-end-bottom">
  <button popovertarget="popoverEndBottom" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverEndBottom">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Position von unten beginnend

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-bottom-start">
  <button popovertarget="popoverBottomStart" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomStart">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Position unten in der Mitte

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-bottom-center">
  <button popovertarget="popoverBottomCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Popover-Position am unteren Ende

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-bottom-end">
  <button popovertarget="popoverBottomEnd" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverBottomEnd">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Start-Top-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-start-top">
  <button popovertarget="popoverStartTop" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartTop">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Start-Center-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-start-center">
  <button popovertarget="popoverStartCenter" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartCenter">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Start-Unten-Popover-Position

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="popover popover-start-bottom">
  <button popovertarget="popoverStartBottom" type="button" class="popover-toggle btn">Click here</button>
  <div tabindex="0" class="popover-content" popover id="popoverStartBottom">
      <ul class="menu">
        <li>
          <a class="menu-item">About Us</a>
        </li>
        <li>
          <a class="menu-item">Contact Us</a>
        </li>
        <li>
          <a class="menu-item">Career</a>
        </li>
        <li>
          <a class="menu-item">Terms and conditions</a>
        </li>
      </ul>
  </div>
</div>

Verwenden von Popovers in Datentabellen (Aktionsmenüs und Bestätigungen)

Project Category Primary Tech
E-commerce Dashboard
Internal Tool
 Full Stack Admin Panel Next.js
  • Are you sure? delete this record!
CI Pipeline
Infrastructure
 DevOps Automation GitHub Actions
Project Category Primary Tech
html 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">E-commerce Dashboard</div>
            <div class="text-sm opacity-50">Internal Tool</div>
          </div>
        </td>
        <td>
          Full Stack

          <span class="badge badge-soft badge-sm">Admin Panel</span>
        </td>
        <td>Next.js</td>
        <th>
          <div class="popover popover-bottom-start">
            <button popovertarget="popoverOnTable" type="button"
              class="popover-toggle btn btn-xs btn-error">Delete</button>
            <div tabindex="0" class="popover-content" popover id="popoverOnTable">
              <ul class="menu menu-horizontal">
                <li class="menu-title">Are you sure? delete this record!</li>
                <li>
                  <button class="btn btn-xs">No</button>
                </li>
                <li>
                  <button class="btn btn-xs btn-error">Delete</button>
                </li>
              </ul>
            </div>
          </div>
        </th>
      </tr>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">CI Pipeline</div>
            <div class="text-sm opacity-50">Infrastructure</div>
          </div>
        </td>
        <td>
          DevOps

          <span class="badge badge-soft badge-sm">Automation</span>
        </td>
        <td>GitHub Actions</td>
        <th>
          <div class="popover popover-bottom-start">
            <button popovertarget="popoverOnTable2" type="button"
              class="popover-toggle btn btn-xs btn-error">Delete</button>
            <div tabindex="0" class="popover-content" popover id="popoverOnTable2">
              <ul class="menu menu-horizontal">
                <li>
                  <button class="menu-item btn btn-xs">No</button>
                </li>
                <li>
                  <button class="menu-item btn btn-xs btn-error">Delete</button>
                </li>
              </ul>
            </div>
          </div>
        </th>
      </tr>
    </tbody>

    <!-- foot -->
    <tfoot>
      <tr>
        <th></th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>

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

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

Probieren Sie Cherry MCP