React Overlay Trigger

Positioned overlay Component for React

The `usePopover` hook can help you position an overlay popover relative to the trigger element. You can use it to create tooltips, popovers, and other overlays.

Getting Started

Install

npm i -S react-overlay-trigger

import React from 'react'
import { usePopover } from 'react-overlay-trigger'

const Popover = ({ style, ...rest }) => <span {...rest}>{children}</span>

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

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

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>
  </>
)