Popover#

Import#

import { Popover } from '@dnb/eufemia'

Description#

Popover renders its own floating surface anchored to a trigger element.

It is used in the Tooltip and DatePicker component, but can also be used directly when you need a more flexible trigger or richer content.

Relevant links#

• Source code
• Docs code

Accessibility#

• Focus moves into the popover body once it opens (similar to TermDefinition). When restoreFocus is enabled, closing with Escape or the close button returns focus to the trigger. A click or tap outside closes the popover without moving focus back to the trigger.
• The Popover does by default change its alignment initially, but not reposition itself during user scroll when opened, as this could be disorienting and confusing for users.
• When you render a trigger via the provided render props, it receives ARIA attributes such as aria-controls, aria-expanded, and aria-describedby alongside keyboard handlers.
• Set hideCloseButton if you want to remove the built-in close button and handle dismissal yourself (use the provided close helper when rendering custom content).
• The popover can be dismissed with Escape, by clicking outside, or by using the close button.
• Custom triggers receive the necessary ARIA attributes (aria-controls, aria-expanded, aria-describedby) and keyboard handlers so long as you spread the provided props.

Root Element (React Portal)#

The Popover component uses PortalRoot internally to render its content. See the PortalRoot documentation for information on how to control where the portal content appears in the DOM, and for the BrowserTranslate helper when browser translation tools such as Google Translate should not modify content rendered through PortalRoot.

Related components#

Popover is part of the Feedback category. Other components for similar needs:

• AriaLive — to announce page changes to screen reader users.
• Badge — to highlight new, unread, or important information.
• Dialog — when people need to make a choice or read an important message before continuing.
• Drawer — to show extra content in a panel that slides in from the side.
• FormStatus — to show validation errors, warnings, or messages near a form.
• GlobalError — to show a clear 404 or 500 error page.

See all in Feedback →

Demos#

Basic usage#

<Popover
  trigger={({ active, ...triggerProps }) => (
    <Button icon="question" {...triggerProps} selected={active} />
  )}
  title="Need help?"
>
  Popover content that appears when the custom trigger button is toggled.
</Popover>

Without close button#

<Popover
  hideCloseButton
  trigger={(triggerProps) => (
    <Button text="More info" variant="secondary" {...triggerProps} />
  )}
  title="More information"
  content={({ close }) => (
    <Flex.Stack>
      <P>
        This popover hides the default close button. You can still close it
        programmatically by calling the provided helpers.
      </P>
      <Button text="Dismiss" variant="secondary" onClick={close} />
    </Flex.Stack>
  )}
/>