@tdcerhverv/popover

Popover component

Zeroheight: https://zeroheight.com/135a7addc/v/latest/p/46208e-popover-infobox Components-gallery: https://components-gallery.knet.lqd.dk/?component=Popover

Description

Popovers are used to display additional information about an element which is not critical to task completion.

Keyboard bindings:

• tab to focus on a trigger button
• space or enter to open currently focused
• esc to close currently open

Usage

Import like this:

import { Popover } from '@tdcerhverv/popover';

Use like this:

<Popover tooltipText="More information">Lorem ipsum dolor sit amet</Popover>

Or with a custom icon:

<Popover icon={Lock} tooltipText="More information">
  Lorem ipsum dolor sit amet
</Popover>

Props

interface IPopover {
  children?: ReactNode; // content you would like displayed in the Popover. Zeroheight design guide recommends text & images only
  tooltipText?: string; // the conent shown in the on:hover tooltip component; hidden when the popover is open
  buttonClassName?: string; // style class for the trigger icon button (use with any styling except for placement related)
  popoverClassName?: string; // style class for the popover itself (avoid styling `transform` property, as it's reserved for component's functionality)
  buttonPlacementClass?: string; // style class for the trigger icon button (use only for positioning / placement as it's a parent container for the button itself)
  icon?: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>; // SVG icon imported from parrotfish
}

Description

Popovers are used to display additional information about an element which is not critical to task completion.

Keyboard bindings:

• tab to focus on a trigger button
• space or enter to open currently focused
• esc to close currently open