@eureca/eureca-ui/src/components/Tooltip/index.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, IconButton, Popover, useTheme } from '@material-ui/core';

import { FaQuestionCircle } from 'react-icons/fa';

import { colors } from '../../theme/colors';

function Tooltip({ children }) {
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = useState(null);

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <>
      <IconButton size="small" onClick={handleClick} aria-describedby={id}>
        <FaQuestionCircle color={colors.gray3} />
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Box
          p={3}
          bgcolor={colors.gray5}
          border={`1px solid ${colors.gray4}`}
          borderRadius={theme.spacing(0.5)}
        >
          {children}
        </Box>
      </Popover>
    </>
  );
}

Tooltip.propTypes = {
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.object]),
};

Tooltip.defaultProp = {
  children: null,
};

export { Tooltip };