{"size": 1802, "ext": "js", "max_stars_repo_path": "polymath-apps/packages/polymath-ui/src/components/Tooltip/Tooltip.js", "max_stars_repo_name": "Morpheuslabs-io/sto-as-service-app-ref", "max_stars_repo_stars_event_min_datetime": "2018-09-22T15:40:13.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-21T13:49:35.000Z", "max_issues_repo_path": "polymath-apps/packages/polymath-ui/src/components/Tooltip/Tooltip.js", "max_issues_repo_name": "Morpheuslabs-io/sto-as-service-app-ref", "max_issues_repo_issues_event_min_datetime": "2018-09-19T16:30:52.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-30T20:44:45.000Z", "max_forks_repo_path": "polymath-apps/packages/polymath-ui/src/components/Tooltip/Tooltip.js", "max_forks_repo_name": "Morpheuslabs-io/sto-as-service-app-ref", "max_forks_repo_forks_event_min_datetime": "2018-09-18T16:55:45.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-29T13:33:47.000Z"}
{"max_stars_count": 17, "max_issues_count": 169, "max_forks_count": 13, "avg_line_length": 21.2, "max_line_length": 72, "alphanum_fraction": 0.5960044395}
import React, { Fragment } from 'react';
import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';

import Icon from '../Icon';

import InfoIcon from '../../images/icons/Info';

const StyledContainer = styled.div`
  .__react_component_tooltip {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    max-width: 15rem;
    background-color: white;
    padding: 1rem;
    border: 1px solid #dfe3e6;
    word-wrap: break-word;
    pointer-events: auto;
    border-radius: 0;
    transition: none;
    font-weight: normal;
    font-size: ${({ theme }) => theme.fontSizes.baseText};

    &.show {
      opacity: 1;
    }

    &.place-top:before {
      border-top: 8px solid rgba(0, 0, 0, 0.05);
    }

    &.place-bottom:before {
      border-bottom: 8px solid #dfe3e6;
    }
  }

  p:last-child {
    margin-bottom: 0;
  }
`;

const StyledText = styled.span`
  vertical-align: middle;
  line-height: 1;
  margin-right: 4px;
`;

const StyledIcon = styled(Icon)`
  transition: ${({ theme }) => `color ${theme.transitions.hover.ms}ms`};
  color: ${({ theme }) => theme.colors.secondary};

  &:hover {
    color: ${({ theme }) => theme.colors.blue[0]};
  }
`;

const Tooltip = ({ triggerText, children, id }) => (
  <Fragment>
    <StyledText>{triggerText}</StyledText>
    <StyledIcon
      data-tip
      data-for={id || triggerText}
      aria-describedby={id || triggerText}
      Icon={InfoIcon}
      width="16"
      height="16"
    />
    <StyledContainer role="tooltip">
      <ReactTooltip
        id={id || triggerText}
        delayShow={200}
        delayHide={200}
        effect="solid"
        type="light"
        place="bottom"
      >
        {children}
      </ReactTooltip>
    </StyledContainer>
  </Fragment>
);

export default Tooltip;

Tooltip.defaultProps = {};
