Component <Popper />

Props

Props	Type	Meaning	Possible values
color	string	Change popper background color	white / dark
position	string	Change popper position around the elemet	top-left / top / top-right / right-top / right / right-bottom / bottom-left / bottom / bottom-right / left-top / left / left-bottom
isOpen	boolean	Set popper status	true / false

---

Colors

const PopperColor = ({ color }) => {
  const [isPopper, setPopper] = useState(false)

  return (
    <>
      <button type="button" onClick={event => setPopper(isPopper ? false : event.currentTarget)}>
        Open {color.replace('-', ' ')}
      </button>

      <Popper isOpen={isPopper} color={color}>
        Some useful info
      </Popper>
    </>
  )
}

---

Positions

const PopperPos = ({ position }) => {
  const [isPopper, setPopper] = useState(false)

  return (
    <>
      <button type="button" onClick={event => setPopper(isPopper ? false : event.currentTarget)}>
        Open {position.replace('-', ' ')}
      </button>

      <Popper isOpen={isPopper} position={position}>
        Some useful info
      </Popper>
    </>
  )
}