Popover And Tooltip Library For React

Description:

An easy to use library for creating popover and tooltip components in your React projects.

How to use it:

1. Install the library.

# Yarn
$ yarn add @varld/popover
# NPM
$ npm i @varld/popover

2. Create a tooltip on your component.

import { Tooltip } from '@varld/popover';

let Component = () => {
  return (
    <Tooltip content="Tooltip Content">
      <button>Hover Me</button>
    </Tooltip>
  )
}

3. Create a popover component.

import { Popover } from '@varld/popover';

let Component = () => {
  return (
    <Popover popover={({ visible, open, close }) => {
      return (
        <div>
          I am a popover and i am {visible ? 'visible' : 'not visible'} and {open ? 'open' : 'not open'}
          <button onClick={() => close()}>
            Close me
          </button>
        </div>
      )
    }}>
      <button>Click Me</button>
    </Popover>
  )
}