Pops

Positioned overlay Component for React

Getting Started

Examples

Clickable Popover

Tooltip: click, tooltip show on bottom and right

const { popover, triggerProps } = usePopover(Dialog, {
  placement: 'right',
  clickToggle: true,
})

return (
  <>
    {popover}
    <button {...triggerProps}>click to toggle tips</button>
  </>
)

Hover Popover

Tooltip: Mouse hover and tab focus will trigger tooltips. They will show on top and left

  function Tooltip({style, onClose, ...props}, ref) {
    return (
      <div>
        <div>Tooltip content....</div>
        <button onClick={onClose}>close</button>
      </div>
    )
  }

  const { popover, triggerProps } = usePopover(Dialog, {
    placement="top"
    toggleHover: true,
    toggleFocus: true,
  })

  return (
    <>
      {popover}
      <button {...triggerProps}>click to open dialog</button>
    </>
  )

Dialog: Open a dialog flowing over the trigger button.

function Dialog({style, onClose, ...props}, ref) {
  return (
    <div>
      <div>Dialog content....</div>
      <button onClick={onClose}>close</button>
    </div>
  )
}

const { popover, triggerProps } = usePopover(Dialog, {
  placement: 'center',
  clickToggle: true,
})

return (
  <>
    {popover}
    <button {...triggerProps}>click to open dialog</button>
  </>
)