8
Components

Popover

An accessible and customizable popover component for displaying additional content on demand.

Introduction

The Popover component is a highly customizable and accessible floating UI element that displays additional information or content when triggered. It is ideal for tooltips, menus, or additional content sections.


Default Use Case: Simple Popover


Installation

Install the Popover component:

npx axionjs-ui add popover

File Structure

global.css

Prop Types

PropTypeDefault
align
"start" | "center" | "end"
"center"
sideOffset
number
4
children
React.ReactNode
-

Features

  • Interactive Popovers:
    • Trigger popovers on demand with buttons or other components.
  • Customizable Positioning:
    • Adjust alignment, side, and offsets with ease.
  • Accessible:
    • Fully compliant with ARIA roles and attributes.

Conclusion

The Popover component is a powerful and flexible tool for displaying contextual content. Its customizable options and built-in accessibility make it suitable for a variety of

On this page