pdf-reader-web/components/Tooltip/index.tsx

import React from 'react';
import { Manager, Reference, Popper } from 'react-popper';

import { TargetContainer, TooltipContainer, Arrow } from './styled';
import Portal from '../Portal';

type Props = {
  anchor?: 'left' | 'right' | 'top' | 'bottom';
  children: React.ReactNode;
  content: React.ReactNode;
};

const Tooltip : React.FunctionComponent<Props> = ({
  anchor = 'left',
  children,
  content,
}) => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <TargetContainer ref={ref}>
          {children}
        </TargetContainer>
      )}
    </Reference>
    <Portal>
      <Popper placement={anchor}>
        {({ ref, style, placement, arrowProps }) => (
          <TooltipContainer ref={ref} style={style} data-placement={placement}>
            {content}
            <Arrow data-placement={placement} ref={arrowProps.ref} style={arrowProps.style} />
          </TooltipContainer>
        )}
      </Popper>
    </Portal>
  </Manager>
);

export default Tooltip;