@tdcerhverv/popover
TypeScript icon, indicating that this package has built-in type declarations

1.3.2 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @tdcerhverv/popover

Weekly Downloads

4

Version

1.3.2

License

Apache-2.0

Unpacked Size

42.7 kB

Total Files

12

Last publish

Collaborators

  • antongb
  • dev_jonas
  • jeppebenjaminsen
  • ahhah
  • abdok
  • mikkv
  • clausr1990
  • tdc-sigbe
  • mdige
  • nuudaybot
  • tdc-olila
  • jeroen.dk.nl
  • renand
  • stegr
  • m84100
  • m92212
  • m87979
  • vertic
  • rasladev
  • muddz
  • tajsonik
  • linnt
  • molg