softwares/components-doc/docs/components/overlay/popover.md

Popover

Introduction

The Popover component displays rich, contextual content in a floating panel anchored to a trigger element. It supports both simple text content and structured layouts with header, body, and footer sections. Popovers are ideal for providing additional information, contextual help, quick previews, or interactive content without cluttering the main interface.

Import

import { Popover } from '@odyssee/components';

LiveCodeEditor examples

Basic Popover

Code Éditable

Résultat

Popover with Header & Body

Code Éditable

Résultat

Complete Popover (Header, Body, Footer)

Code Éditable

Résultat

Placement Variants

Code Éditable

Résultat

Max Width Options

Code Éditable

Résultat

User Profile Card Example

Code Éditable

Résultat

Props

Prop	Type	Default	Description
header	string | JSX.Element	—	Header content for the popover.
body	string | JSX.Element	—	Main body content for the popover.
footer	JSX.Element	—	Footer content for the popover.
content	string | JSX.Element	—	Simple content (used if header, body, and footer are not provided).
maxWidth	"xs" | "sm" | "md" | "lg" | "xl" | "2xl"	"xs"	Maximum width of the popover panel.
trigger	"hover"	"hover"	How the popover is triggered (only "hover" is supported).
placement	"top" | "bottom" | "left" | "right" | "auto"	"top"	Position of the popover relative to the trigger element.
children	React.ReactNode	—	The element that triggers the popover.
className	string	—	Additional CSS classes for the popover container.
...rest	Tooltip.Props (except content)	—	Any other props supported by the underlying Tooltip component, except content.

Implementation notes

• Popover is a wrapper around the Tooltip component, extending it to support structured content (header, body, footer) as well as simple content.
• If only the content prop is provided (and header, body, footer are omitted), the popover behaves like a styled tooltip.
• If any of header, body, or footer are provided, the popover renders a rich panel with those sections.
• The maxWidth prop controls the maximum width of the popover panel, with responsive Tailwind classes (max-w-xs, max-w-sm, etc.).
• Only the "hover" trigger is supported.
• All additional props (except content) are passed to the underlying Tooltip component.

Accessibility

• The popover content is rendered in a floating panel and is accessible via keyboard and screen readers when properly triggered.
• The trigger element (child) should be focusable (e.g., a button or link) to ensure keyboard accessibility.
• The underlying Tooltip component manages ARIA attributes and focus management.
• Ensure that the popover content is concise and does not trap focus unless intended for interactive content.

Best practices

• Use Popover for supplementary or contextual information, not for critical actions or persistent content.
• Prefer concise content; avoid overloading the popover with large forms or complex interactions.
• Always provide a clear, focusable trigger element.
• Use the maxWidth prop to ensure content remains readable and visually contained.
• For accessibility, ensure that all interactive elements inside the popover are keyboard accessible.

Related links

• Tooltip documentation
• Modal documentation
• Dropdown documentation
• Odyssee Components documentation