Popover

A configurable Popover component used to show content on the screen when a user clicks or hovers on a control button or in defined area. By default aria-describedby is used for Accessiblity. However, it is possible to use aria-labelledby instead with the prop useLabelledby. This is useful for Emojis or Icons as triggers.

Viewport-aware positioning

The component automatically keeps the tooltip fully visible regardless of screen size or trigger position:

• Flip — when the preferred placement has insufficient space, the tooltip switches to the opposite side (top ↔ bottom, left ↔ right).
• Shift — when neither opposite side has enough room (e.g. a narrow mobile viewport), the tooltip is shifted along the axis with a translateX / translateY offset so it never overflows the document.
• Cross-axis fallback — for left / right placements on very narrow screens where no horizontal space is available on either side, the tooltip falls back to top placement above the trigger.

No configuration is required — the logic runs automatically on every open.

Import

React

// with @dhl-official/react-library:
import { DhlPopover } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlPopover } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-popover></dhl-popover>

Vue.js

// with @dhl-official/vue-library:
import { DhlPopover } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlPopover } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlPopover>
  <DhlButton slot="triggerEl" size="sm">
    <span aria-hidden="true">⚙</span>
  </DhlButton>
  <p>View and manage settings</p>
</DhlPopover>

Angular

<dhl-popover>
  <dhl-button slot="triggerEl" size="sm">
    <span aria-hidden="true">⚙</span>
  </dhl-button>
  <p>View and manage settings</p>
</dhl-popover>

Vue.js

<dhl-popover>
  <dhl-button slot="triggerEl" size="sm">
    <span aria-hidden="true">⚙</span>
  </dhl-button>
  <p>View and manage settings</p>
</dhl-popover>

Interactive Demo

Migrating from DUIL 1.0

• Discontinue use of Popper.js.
• Update placement to hold values top, right, bottom and left
• Add useLabelledby
• Remove offset
• Remove popperOptions
• Remove popoverTriggerAriaLabel
• Remove showCloseButton
• Remove closeButtonAriaLabel
• Remove heading
• Remove trigger
• Remove closeOnOutsideClick

Readme

Properties

Property	Attribute	Description	Type	Default
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-popover-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
placement	placement	An optional prop, it controls where the tooltip is placed relative to the trigger element, defaults to 'none'. Internal business logic determines if the explicit position set with this prop allows the component to be entirely shown in the visible viewport area, if not, it tries to re-position it so that it will. Use 'none' to display without an arrow.	"bottom" | "left" | "none" | "right" | "top"	DHL_POPOVER.PLACEMENT.NONE
showCloseButton	show-close-button	An optional prop, set to true to render a close button (×) inside the tooltip. Useful as a dismiss affordance on mobile/touch devices.	boolean	false
useLabelledby	use-labelledby	An optional prop, set to true it adds the aria-labelledby attribute to the trigger element. If this prop is set to false, the attribute aria-describedby` is used instead.	boolean	undefined
visible	visible	An optional prop, set to true it set the component to its visible state.	boolean	false

Dependencies

Used by

• dhl-input-field
• dhl-navbar

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!