contextual-popover

ContextualPopover is a utility component that can be used to display contextual content such as tooltips and context menus. It relies on Popper.js for positioning.

Import

import { ContextualPopover } from '@xpanseinc/nebula'

Usage

Pass a DOM element to referenceElement as the reference element used to position the popover.

<ContextualPopoverExample />

export const ContextualPopoverExample = () => {
  const [contextElement, setContextElement] = useState(null)
  const [isOpen, setOpen] = useState(true)
  const togglePopover = () => {
    setOpen(!isOpen)
  }
  return (
    <>
      <div
        ref={setContextElement}
        style={{
          width: '150px',
          height: '150px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'white',
          border: '1px solid #C8CBD0',
          cursor: 'pointer',
          WebkitUserSelect: 'none',
        }}
        onClick={togglePopover}
      >
        Context
      </div>
      <ContextualPopover
        referenceElement={contextElement}
        placement="auto"
        offset={[0, 16]}
        open={isOpen}
      >
        <div
          style={{
            width: '75px',
            height: '75px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#C8E8F9',
          }}
        >
          Popover
        </div>
      </ContextualPopover>
    </>
  )
}