BlueStack.io - Component Library

popover Component

Popover System

The popover system provides rich, interactive overlays with positioning. It requires three parts:

Trigger Element - A button or element with data-popover="popover-id" attribute
Popover HTML - The popover structure with matching id="popover-id"
JavaScript - Automatically loaded via hygge.core.js (no setup needed!)

Basic Popover

Preview Code

Copy

<!-- Trigger Button -->
<button class="button" data-popover="basic-popover">Open Popover</button>

<!-- Popover HTML -->
<div id="basic-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Welcome to Popovers</h3>
        <p class="description">This is a basic popover with a title and description.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
    <div class="content">
      <p>
        Popovers are perfect for rich content that requires user interaction. They stay open until
        dismissed.
      </p>
    </div>
  </div>
</div>

<button class="button" data-popover="basic-popover">
    Open Popover
</button>

<div id="basic-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Welcome to Popovers</h3>
                <p class="description">This is a basic popover with a title and description.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
        <div class="content">
            <p>Popovers are perfect for rich content that requires user interaction. They stay open until dismissed.</p>
        </div>
    </div>
</div>

Popover Sizes

Tiny Popover

Preview Code

Copy

<button class="button tiny" data-popover="tiny-popover">Tiny</button>

<div id="tiny-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover tiny">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Tiny Popover</h3>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
    <div class="content">
      <p class="text-sm">Compact popover for minimal content.</p>
    </div>
  </div>
</div>

Small Popover

Preview Code

Copy

<button class="button small" data-popover="small-popover">Small</button>

<div id="small-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover small">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Small Popover</h3>
        <p class="description">Perfect for quick interactions.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Large Popover

Preview Code

Copy

<button class="button large" data-popover="large-popover">Large</button>

<div id="large-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover large">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Large Popover</h3>
        <p class="description">More space for detailed content and interactions.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
    <div class="content">
      <p class="mb-4">
        Large popovers provide ample space for rich content, forms, or complex interactions.
      </p>
      <div class="flex gap-3">
        <div class="flex-1 p-3 bg-gray-50 rounded-lg">
          <p class="text-sm font-medium">Feature 1</p>
          <p class="text-xs text-gray-600">Description here</p>
        </div>
        <div class="flex-1 p-3 bg-gray-50 rounded-lg">
          <p class="text-sm font-medium">Feature 2</p>
          <p class="text-xs text-gray-600">Description here</p>
        </div>
      </div>
    </div>
  </div>
</div>

<button class="button large" data-popover="large-popover">Large</button>

<div id="large-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover large">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Large Popover</h3>
                <p class="description">More space for detailed content and interactions.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
        <div class="content">
            <p class="mb-4">Large popovers provide ample space for rich content, forms, or complex interactions.</p>
            <div class="flex gap-3">
                <div class="flex-1 p-3 bg-gray-50 rounded-lg">
                    <p class="text-sm font-medium">Feature 1</p>
                    <p class="text-xs text-gray-600">Description here</p>
                </div>
                <div class="flex-1 p-3 bg-gray-50 rounded-lg">
                    <p class="text-sm font-medium">Feature 2</p>
                    <p class="text-xs text-gray-600">Description here</p>
                </div>
            </div>
        </div>
    </div>
</div>

Positioning

Top Positions

Preview Code

Copy

<div class="flex gap-4">
  <button class="button" data-popover="top-popover">Top</button>
  <button class="button" data-popover="top-start-popover">Top Start</button>
  <button class="button" data-popover="top-end-popover">Top End</button>
</div>

<div id="top-popover" class="popover-overlay hidden" data-position="top">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Top Position</h3>
        <p class="description">Popover appears above the trigger element.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="top-start-popover" class="popover-overlay hidden" data-position="top-start">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Top Start</h3>
        <p class="description">Aligned to the left edge.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="top-end-popover" class="popover-overlay hidden" data-position="top-end">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Top End</h3>
        <p class="description">Aligned to the right edge.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="flex gap-4">
    <button class="button" data-popover="top-popover">Top</button>
    <button class="button" data-popover="top-start-popover">Top Start</button>
    <button class="button" data-popover="top-end-popover">Top End</button>
</div>

<div id="top-popover" class="popover-overlay hidden" data-position="top">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Top Position</h3>
                <p class="description">Popover appears above the trigger element.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="top-start-popover" class="popover-overlay hidden" data-position="top-start">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Top Start</h3>
                <p class="description">Aligned to the left edge.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="top-end-popover" class="popover-overlay hidden" data-position="top-end">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Top End</h3>
                <p class="description">Aligned to the right edge.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

Bottom Positions

Preview Code

Copy

<div class="flex gap-4">
  <button class="button" data-popover="bottom-popover">Bottom</button>
  <button class="button" data-popover="bottom-start-popover">Bottom Start</button>
  <button class="button" data-popover="bottom-end-popover">Bottom End</button>
</div>

<div id="bottom-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Bottom Position</h3>
        <p class="description">Popover appears below the trigger element.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="bottom-start-popover" class="popover-overlay hidden" data-position="bottom-start">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Bottom Start</h3>
        <p class="description">Aligned to the left edge.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="bottom-end-popover" class="popover-overlay hidden" data-position="bottom-end">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Bottom End</h3>
        <p class="description">Aligned to the right edge.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="flex gap-4">
    <button class="button" data-popover="bottom-popover">Bottom</button>
    <button class="button" data-popover="bottom-start-popover">Bottom Start</button>
    <button class="button" data-popover="bottom-end-popover">Bottom End</button>
</div>

<div id="bottom-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Bottom Position</h3>
                <p class="description">Popover appears below the trigger element.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="bottom-start-popover" class="popover-overlay hidden" data-position="bottom-start">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Bottom Start</h3>
                <p class="description">Aligned to the left edge.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="bottom-end-popover" class="popover-overlay hidden" data-position="bottom-end">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Bottom End</h3>
                <p class="description">Aligned to the right edge.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

Feature Variations

Popover with Icon

Preview Code

Copy

<button class="button" data-popover="icon-popover">With Icon</button>

<div id="icon-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="icon-container">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="currentColor"
        >
          <path
            d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"
          ></path>
        </svg>
      </div>
      <div class="content">
        <h3 class="title">Success!</h3>
        <p class="description">Your changes have been saved successfully.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="icon-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="icon-container">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path>
                </svg>
            </div>
            <div class="content">
                <h3 class="title">Success!</h3>
                <p class="description">Your changes have been saved successfully.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

Popover with Footer Actions

Preview Code

Copy

<button class="button" data-popover="footer-popover">With Footer</button>

<div id="footer-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Confirm Action</h3>
        <p class="description">Are you sure you want to proceed?</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
    <div class="content">
      <p>This action cannot be undone. Please confirm to continue.</p>
    </div>
    <div class="footer">
      <span class="step"></span>
      <div class="actions">
        <button class="button ghost small">Cancel</button>
        <button class="button primary small">Confirm</button>
      </div>
    </div>
  </div>
</div>

<button class="button" data-popover="footer-popover">With Footer</button>

<div id="footer-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Confirm Action</h3>
                <p class="description">Are you sure you want to proceed?</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
        <div class="content">
            <p>This action cannot be undone. Please confirm to continue.</p>
        </div>
        <div class="footer">
            <span class="step"></span>
            <div class="actions">
                <button class="button ghost small">Cancel</button>
                <button class="button primary small">Confirm</button>
            </div>
        </div>
    </div>
</div>

Popover with Text Stepper

Preview Code

Copy

<button class="button" data-popover="stepper-popover">Text Stepper</button>

<div id="stepper-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="icon-container">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="currentColor"
        >
          <path
            d="M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
          ></path>
        </svg>
      </div>
      <div class="content">
        <h3 class="title">Getting Started</h3>
        <p class="description">Follow these steps to complete your setup.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
    <div class="content">
      <p>This is the second step of the setup process. Click Next to continue or Back to return.</p>
    </div>
    <div class="footer">
      <span class="step">Step 2 of 4</span>
      <div class="actions">
        <button class="button ghost small">Back</button>
        <button class="button primary small">Next</button>
      </div>
    </div>
  </div>
</div>

<button class="button" data-popover="stepper-popover">Text Stepper</button>

<div id="stepper-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="icon-container">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"></path>
                </svg>
            </div>
            <div class="content">
                <h3 class="title">Getting Started</h3>
                <p class="description">Follow these steps to complete your setup.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
        <div class="content">
            <p>This is the second step of the setup process. Click Next to continue or Back to return.</p>
        </div>
        <div class="footer">
            <span class="step">Step 2 of 4</span>
            <div class="actions">
                <button class="button ghost small">Back</button>
                <button class="button primary small">Next</button>
            </div>
        </div>
    </div>
</div>

Color Themes

Themed Popovers

Preview Code

Copy

<div class="flex gap-4">
  <button class="button primary" data-popover="primary-popover">Primary</button>
  <button class="button positive" data-popover="positive-popover">Positive</button>
  <button class="button warning" data-popover="warning-popover">Warning</button>
  <button class="button negative" data-popover="negative-popover">Negative</button>
</div>

<div id="primary-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover primary">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Primary Theme</h3>
        <p class="description">Use for important information or primary actions.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="positive-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover positive">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Success!</h3>
        <p class="description">Operation completed successfully.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="warning-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover warning">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Warning</h3>
        <p class="description">Please review this important information.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div id="negative-popover" class="popover-overlay hidden" data-position="bottom">
  <div class="popover negative">
    <div class="popover-tail"></div>
    <div class="header">
      <div class="content">
        <h3 class="title">Error</h3>
        <p class="description">Something went wrong. Please try again.</p>
      </div>
      <button class="button close" type="button" aria-label="Close">
        <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
        >
          <path
            d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="flex gap-4">
    <button class="button primary" data-popover="primary-popover">Primary</button>
    <button class="button positive" data-popover="positive-popover">Positive</button>
    <button class="button warning" data-popover="warning-popover">Warning</button>
    <button class="button negative" data-popover="negative-popover">Negative</button>
</div>

<div id="primary-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover primary">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Primary Theme</h3>
                <p class="description">Use for important information or primary actions.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="positive-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover positive">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Success!</h3>
                <p class="description">Operation completed successfully.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="warning-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover warning">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Warning</h3>
                <p class="description">Please review this important information.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="negative-popover" class="popover-overlay hidden" data-position="bottom">
    <div class="popover negative">
        <div class="popover-tail"></div>
        <div class="header">
            <div class="content">
                <h3 class="title">Error</h3>
                <p class="description">Something went wrong. Please try again.</p>
            </div>
            <button class="button close" type="button" aria-label="Close">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
                    <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

JavaScript API

Programmatic Control

Preview Code

Copy

// Open a popover Popover.open('my-popover', triggerElement); // Close a specific popover Popover.close('my-popover'); // Close all open popovers Popover.closeAll(); // Toggle a popover Popover.toggle('my-popover', triggerElement); // Check if popover is open if (Popover.isOpen('my-popover')) { console.log('Popover is open'); }

// Open a popover Popover.open('my-popover', triggerElement); // Close a specific popover
Popover.close('my-popover'); // Close all open popovers Popover.closeAll(); // Toggle a popover
Popover.toggle('my-popover', triggerElement); // Check if popover is open if
(Popover.isOpen('my-popover')) { console.log('Popover is open'); }

Popover Events

Preview Code

Copy

// Listen for open event $('#my-popover').on('popover:open', function(e, popoverId) { console.log('Popover opened:', popoverId); }); // Listen for close event $('#my-popover').on('popover:close', function(e, popoverId) { console.log('Popover closed:', popoverId); });

// Listen for open event $('#my-popover').on('popover:open', function(e, popoverId) {
console.log('Popover opened:', popoverId); }); // Listen for close event
$('#my-popover').on('popover:close', function(e, popoverId) { console.log('Popover closed:',
popoverId); });

Custom Positioning

Preview Code

Copy

<div id="custom-popover" class="popover-overlay hidden" data-position="top-start">  </div>  <div class="popover top-end">  </div>

&lt;!-- Use data-position attribute --&gt; &lt;div id="custom-popover" class="popover-overlay
hidden" data-position="top-start"&gt; &lt;!-- Popover content --&gt; &lt;/div&gt; &lt;!-- Or add
position class to .popover element --&gt; &lt;div class="popover top-end"&gt; &lt;!-- Popover
content --&gt; &lt;/div&gt;