import classNames from "classnames";
import * as React from "react";

import * as styles from "./index.scss";

class ToolTip extends React.Component<IProps> {
  public render = () => {
    const { className, content, children} = this.props;

    return (
      <span className={stylesContext(styles.root)}>
        {children}
        <span
          className={stylesContext(
            styles.content,
            className
          )}
        >
          {content}
        </span>
      </span>
    );
  };
}

.root {
  position: relative;
  display: flex;
  justify-content: center;

  .content {
    display: none;
    color: $white1;
    max-width: 400px;
    min-width: 65px;
    position: absolute;
    left: 50%;
    transform: translate(-20%, -100%);
    padding: 8px 16px;
    border-radius: 5px;
    box-shadow: 0 -2px 10px 7px rgba(0, 0, 0, 0.2);
    background-color: $color;
    top: -55%;
    font-style: normal;
    margin-left: -5px;
    margin-bottom: -5px;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    box-sizing: border-box;
    line-height: 19px;
    text-align: left;

    &::after {
      top: 100%;
      left: 20%;
      margin-left: -5px;
    }
  }
}

<ToolTip content={config.tooltip}>
        <QuestionIcon />
   </ToolTip>