Popover

Popover System Overview

The popover system is built on an attribute-driven architecture where triggers and targets interact through shared values. This allows multiple elements to control and respond to the same popover state across different contexts.

• Triggers and targets are connected through shared attribute values
• Multiple triggers can control a single target
• Targets can be closed using attributes or dedicated close classes
• State is managed through system classes such as is-open, on-enter, and on-exit
• Supports click, hover, and delayed auto-close interactions

‍

Core Concepts

Trigger b-popover-open
Defines the element that opens a popover. The value must match the corresponding target.

Target b-popover-target
The element that receives the open and close states. It reacts to triggers with matching values.

Close Mechanisms
Popovers can be closed using either:

• Attribute: b-popover-close
• Class: popover-close

State Classes
The system uses the following classes to control visibility and animation:

• is-open — applied when the popover is active
• on-enter — applied during the opening transition
• on-exit — applied during the closing transition

‍

Popover Structure

Each popover is defined using the attribute b-popover-target with a unique value.

Example: b-popover-target = pricing

The value acts as the popover identifier and must match the trigger that opens it.

When a popover opens, the script applies the following classes to the popover target: is-open and on-enter.

These classes control visibility and the entry transition.

‍

Trigger Elements

Any element can open a popover by adding the attribute b-popover-open with the same value used on the popover target.

Example: b-popover-open = pricing

When activated, the trigger finds all popover targets with the matching identifier and opens them.

Triggers can be placed anywhere on the page and multiple triggers can control the same popover group.

‍

Closing a Popover

There are two ways to close a popover.

Local close

Any element inside a popover can close it by adding the class popover-close.

When activated, the script finds the closest parent popover container and begins the exit transition.

Global close

A popover can also be closed from anywhere in the document using the attribute b-popover-close with the matching popover identifier.

Example: b-popover-close = pricing

All popover targets with the matching identifier will close simultaneously.

‍

Popover State Classes

The popover system uses three classes to control popover behavior and transitions.

• is-open
  Applied when the popover becomes visible. This class typically controls layout or display properties.
• on-enter
  Added immediately after is-open to trigger the entry transition.
• on-exit
  Added when the popover begins closing. The popover transitions from its entered state to the exit state.

After the exit transition finishes, all three classes are removed automatically.

‍

Transition Logic

Transitions are controlled through system classes rather than interactions.

This approach allows full control over animation behavior while keeping the interaction logic consistent across all popovers.

Typical setup:

• popover-navigation
  Popover hidden or positioned off-state. This is the base state.
• is-open
  Popover becomes active and defines the starting state before the transition begins.
• is-open + on-enter
  Defines the fully entered visual state.
• is-open + on-enter + on-exit
  Defines the exit transition state.

When closing, the script adds the on-exit class while keeping the on-enter class applied so the transition begins from the exact position where the entry animation finished.

‍

Hover Popovers

Hover popovers are enabled by adding the attribute b-popover-hover = true on the trigger element.

When enabled, hovering the trigger opens the popover.

The popover remains open while the pointer is over either the trigger or the popover target.

Once the pointer leaves both the trigger and the popover target, the popover closes automatically.

This prevents accidental closing while moving the cursor between the trigger and the popover content.

‍

Auto Close Popovers

Auto-close behavior is enabled by adding the attribute b-popover-auto-close to the trigger element.

Example: b-popover-auto-close = 3

The value represents the number of seconds before the popover automatically closes.

The timer begins when the popover opens and resets each time the popover is triggered again.

If the popover is closed manually before the timer completes, the timer is cleared automatically.

‍

Multiple Popovers

The system supports multiple popovers on the same page.

Triggers open only the popovers that match their identifier.

Multiple popover targets can share the same identifier, allowing several popovers to open together from a single trigger.

This makes it possible to synchronize popover components across different parts of the interface.

‍

Popover Stacking Order

When a popover opens, it moves to the end of its parent container.

This ensures that multiple popovers appear in the order they were opened.

Because popovers remain in normal document flow, stacking is handled through DOM order.

This keeps the layout predictable and prevents layering conflicts.

‍

Keyboard Interaction

Pressing the Escape key closes the most recently opened popover.

This provides a consistent keyboard interaction pattern across the interface.

‍

Summary

To create a popover:

1. Add a popover container with the attribute b-popover-target = popover-name.
2. Add a trigger element with the attribute b-popover-open = popover-name.
3. Optionally add a close element inside the popover using the class popover-close.
4. Optionally add a global close control using b-popover-close = popover-name.
5. Define CSS transitions using the classes is-open, on-enter, and on-exit.

Optional behavior:

Hover popovers can be enabled with b-popover-hover = true.

Auto-close can be enabled with b-popover-auto-close = #.