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

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

import { TargetWrapper, 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,
}: Props) => (
  <Manager>
    <Reference>
      {({ ref }): React.ReactElement => (
        <TargetWrapper ref={ref}>
          {children}
        </TargetWrapper>
      )}
    </Reference>
    <Portal>
      <Popper placement={anchor}>
        {({
          ref, style, placement, arrowProps,
        }): React.ReactElement => (
          <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;