Skip to main content
Frutjam logo Frutjam
v2.0.4
Theme

Popover Component

A lightweight, accessible popover component built with Tailwind CSS for contextual information and interactive overlays. Display tooltips, dropdown menus, and additional content on hover or click. Supports multiple positions and rich content layouts for intuitive contextual UI patterns.

Popover components display contextual content adjacent to trigger elements without occupying permanent screen space. Built on the native HTML Popover API, the Frutjam popover system supports click and hover triggers, customizable positioning, and smooth animations. Perfect for dropdown menus, user profiles, and additional options without page navigation.

Class Type Description
popoverBaseWrapper that anchors trigger and content together
popover-contentModifierFloating panel shown when the popover is open
popover-toggleModifierTrigger element that opens/closes the popover
popover-hoverModifierOpens on hover instead of click
popover-top-startModifierPositioned above, aligned to the start
popover-top-centerModifierPositioned above, centered
popover-top-endModifierPositioned above, aligned to the end
popover-bottom-startModifierPositioned below, aligned to the start
popover-bottom-centerModifierPositioned below, centered
popover-bottom-endModifierPositioned below, aligned to the end
popover-start-topModifierPositioned to the left, aligned to the top
popover-start-centerModifierPositioned to the left, vertically centered
popover-start-bottomModifierPositioned to the left, aligned to the bottom
popover-end-topModifierPositioned to the right, aligned to the top
popover-end-centerModifierPositioned to the right, vertically centered
popover-end-bottomModifierPositioned to the right, aligned to the bottom

Basic Usage

 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>

Popover Interaction Behavior

By default, click interactions are used to open and close the popover component. For megamenus, for instance, you can enable hover-based interaction by adding the popover-hover class and removing the popovertarget and popover attributes. This allows the popover to be fully controlled via hover logic rather than the native click behavior.

Native Click 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 Interaction Logic

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 Positioning Options (Top, Bottom, Start, End)

Position your popovers relative to their trigger elements using our flexible placement logic. Popover placement is created by combining vertical (top, center, bottom) and horizontal (start, center, end) alignment options.

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>

Top-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-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>

Top-End 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-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>

Bottom-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-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>

Bottom-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-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>

Bottom-End 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-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-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-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>

Using Popovers Inside Data Tables (Action Menus and Confirmations)

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>