Notika

Popovers

Welcome to Notika Admin Template

Directional Popovers

Four placement options: top, right, bottom, and left. Click each button to see the popover appear.

Trigger Methods

Popovers support different trigger types: click (default), hover, and focus.

Dismissible Popovers

Click anywhere outside the popover to dismiss it. Uses data-bs-trigger="focus" on an <a> element.

Rich HTML Content

Popovers can render HTML content using data-bs-html="true" for richer formatting.

Color Variants

Pair popovers with different button styles for contextual meaning and visual hierarchy.

Practical Examples

Real-world use cases showing popovers for help text, user previews, and status information.