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
orenter
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
orenter
to open currently focused -
esc
to close currently open