Popover

Popovers are used to display transient content that appears when a user interacts with a trigger element. They float above the application’s content and can be dismissed by clicking outside or on a designated close button.

Examples

Basic Popover

A popover is created using the <ro-popover> custom element. It requires a trigger element with the .ro-popover-toggle class and a popover container with the .ro-popover class.

<ro-popover>
  <button class="ro-btn ro-popover-toggle">Toggle Popover</button>
  <div class="ro-popover">
    <div class="ro-popover-body">
      This is a simple popover.
    </div>
  </div>
</ro-popover>

Preview

Toggle Popover

This is a simple popover.

Header, Body, and Footer

For more structured content, you can use .ro-popover-header, .ro-popover-body, and .ro-popover-footer. Buttons or links with the data-ro-dismiss attribute inside the popover will close it when clicked.

<ro-popover data-ro-placement="bottom-start">
  <button class="ro-btn ro-popover-toggle">Open with Header</button>
  <div class="ro-popover" data-ro-size="md">
    <div class="ro-popover-header">
      <h6>Popover Title</h6>
    </div>
    <div class="ro-popover-body">
      <p>This is the main content of the popover. You can put anything you want here.</p>
    </div>
    <div class="ro-popover-footer">
      <button class="ro-btn" data-ro-variant="ghost" data-ro-dismiss>Close</button>
    </div>
  </div>
</ro-popover>

Preview

Open with Header

Popover Title

This is the main content of the popover. You can put anything you want here.

Close

Placement

Use the data-ro-placement attribute on the <ro-popover> element to control its position relative to the trigger. It accepts all placements from Floating UI.

<ro-popover data-ro-placement="top">...</ro-popover>
<ro-popover data-ro-placement="bottom">...</ro-popover>
<ro-popover data-ro-placement="left">...</ro-popover>
<ro-popover data-ro-placement="right">...</ro-popover>

Preview

Top

Placement: top

Bottom

Placement: bottom

Left

Placement: left

Right

Placement: right

Sizing

Control the width of the popover by adding a data-ro-size attribute to the .ro-popover element. The default width is max-content.

<ro-popover>
  <button class="ro-btn ro-popover-toggle">Default (max-content)</button>
  <div class="ro-popover">...</div>
</ro-popover>

<ro-popover>
  <button class="ro-btn ro-popover-toggle">Medium</button>
  <div class="ro-popover" data-ro-size="md">...</div>
</ro-popover>

<ro-popover>
  <button class="ro-btn ro-popover-toggle">Large</button>
  <div class="ro-popover" data-ro-size="lg">...</div>
</ro-popover>

Preview

Default (max-content)

This popover width fits its content.

Md

This is a md popover.

Lg

This is a lg popover.

Properties

<ro-popover>

Attribute	Default	Description
data-ro-placement	bottom-start	Sets the position relative to the trigger. Accepts values like top, top-start, bottom, right-end, etc.

.ro-popover

Attribute	Default	Description
data-ro-size	max-content	Sets a predefined width on the popover. Accepts md (300px) or lg (500px).

Child Elements & Classes

Class	Required	Description
.ro-popover-toggle	Yes	Designates the element that triggers the popover on click. Must be a child of <ro-popover>.
.ro-popover	Yes	The main container for the popover’s content. Must be a child of <ro-popover>.
.ro-popover-header	No	A container for the popover’s header content.
.ro-popover-body	No	A container for the popover’s main body content.
.ro-popover-footer	No	A container for the popover’s footer content, often used for action buttons.
data-ro-dismiss	No	An attribute that can be placed on any element inside a .ro-popover to make it a close trigger.