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.

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 'bottom'. 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.	"bottom" \| "left" \| "right" \| "top"	DHL_POPOVER.PLACEMENT.BOTTOM
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-navbar

Graph

---

Built by DHL User Interface Library Team!