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

Komponent Popover

Ostatnia aktualizacja:

Popover CSS Tailwind wykorzystujący wyłącznie CSS, korzystający z natywnego API popover. Pływający panel treści z podpowiedziami i listami rozwijanymi. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty Popover wyświetlają treść kontekstową obok elementów wyzwalających, nie zajmując stałego miejsca na ekranie. Zbudowany w oparciu o natywny interfejs API HTML Popover, system popover Frutjam obsługuje wyzwalacze kliknięcia i najechania myszką, konfigurowalne pozycjonowanie i płynne animacje. Idealny do menu rozwijanych, menu kontekstowych, menu profilu użytkownika i dodatkowych opcji bez nawigacji po stronie.

Tylko CSS, nie wymaga JavaScript — twórz dostępne menu rozwijane i nakładki kontekstowe za pomocą czystego HTMX i CSS Tailwind. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
popoverOpieraćOpakowanie, które zakotwicza wyzwalacz i zawartość razem
popover-contentModyfikatorPływający panel wyświetlany, gdy popover jest otwarty
popover-toggleModyfikatorElement wyzwalający otwierający/zamykający popover
popover-hoverModyfikatorOtwiera się po najechaniu myszką zamiast kliknięcia
popover-top-startModyfikatorUmieszczony powyżej, wyrównany do początku
popover-top-centerModyfikatorUmieszczone powyżej, centralnie
popover-top-endModyfikatorUmieszczone powyżej, wyrównane do końca
popover-bottom-startModyfikatorUmieszczony poniżej, wyrównany do początku
popover-bottom-centerModyfikatorUmieszczony poniżej, wyśrodkowany
popover-bottom-endModyfikatorUmieszczony poniżej, wyrównany do końca
popover-start-topModyfikatorUmieszczony po lewej stronie, wyrównany do góry
popover-start-centerModyfikatorUmieszczony po lewej stronie, wyśrodkowany w pionie
popover-start-bottomModyfikatorUmieszczony po lewej stronie, wyrównany do dołu
popover-end-topModyfikatorUmieszczony po prawej stronie, wyrównany do góry
popover-end-centerModyfikatorUmieszczony po prawej stronie, wyśrodkowany w pionie
popover-end-bottomModyfikatorUmieszczony po prawej stronie, wyrównany do dołu

Podstawowe użycie

 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>

Menu rozwijane

Użyj komponentu Popover do tworzenia menu rozwijanych — menu nawigacji, menu profilu użytkownika i menu akcji — a wszystko to wyłącznie w formacie CSS, bez konieczności używania JavaScript.

Lista rozwijana paska nawigacyjnego

 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>

Lista rozwijana profilu użytkownika

 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>

Lista rozwijana z ikonami

 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>

Zachowanie interakcji popover

Domyślnie interakcje kliknięcia służą do otwierania i zamykania komponentu popover. Na przykład w przypadku megamenu możesz włączyć interakcję po najechaniu myszką, dodając klasę popover-hover i usuwając atrybuty popovertarget i popover. Umożliwia to pełną kontrolę nad wyskakującym okienkiem za pomocą logiki najechania kursorem, a nie natywnego zachowania kliknięcia.

Natywny wyzwalacz kliknięcia

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>

Logika interakcji kursora

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>

Opcje pozycjonowania wyskakującego okienka (góra, dół, początek, koniec)

Ustaw swoje wyskakujące okienka względem ich elementów wyzwalających, korzystając z naszej elastycznej logiki rozmieszczania. Umiejscowienie wyskakującego okienka tworzy się poprzez połączenie opcji wyrównania w pionie (góra, środek, dół) i poziomie (początek, środek, koniec).

Pozycja wyskakująca od góry

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>

Górna, środkowa pozycja wyskakującego okienka

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>

Najwyższa pozycja wyskakująca

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>

Końcowa górna pozycja wyskakującego okienka

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>

Środkowa pozycja wyskakującego końca

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>

Końcowa dolna pozycja wyskakującego okienka

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>

Pozycja wyskakująca od dołu do góry

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>

Dolna i środkowa pozycja wyskakującego okienka

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>

Dolna pozycja wyskakującego okienka

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>

Początkowa górna pozycja wyskakującego okienka

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>

Pozycja wyskakująca w centrum startowym

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>

Początkowa-dolna pozycja wyskakującego okienka

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>

Korzystanie z wyskakujących okienek w tabelach danych (menu akcji i potwierdzenia)

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>

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

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

Try Cherry MCP