Ajustando Tooltip [GoBarber]

input.styles.js

//Input

import styled, { css } from 'styled-components';

import Tooltip from '../Tooltip';

interface ContainerProps {
  isFocused: boolean;
  isFilled: boolean;
  isErrored: boolean;
}

export const Container = styled.div<ContainerProps>`
  display: flex;
  align-items: center;

  width: 100%;
  padding: 1rem;
  border-radius: 0.625rem;
  border: 0.125rem solid var(--primaryDark);
  background: var(--primaryDark);

  transition: 0.2s all;

  & + div {
    margin-top: 0.5rem;
  }

  input {
    background: transparent;
    flex: 1;
    border: 0;

    color: var(--textColor);

    &::placeholder {
      color: var(--textColorShade50);
    }
  }

  > svg {
    margin-right: 1rem;
    color: var(--textColorShade50);
    transition: 0.2s all;
  }

  ${props =>
    props.isFilled &&
    css`
      border-color: transparent;
      > svg {
        color: var(--orange);
      }
    `}

  ${props =>
    props.isFocused &&
    css`
      border-color: var(--orange);
      > svg {
        color: var(--orange);
      }
    `}

  ${props =>
    props.isErrored &&
    css`
      border-color: var(--errorColor);
    `}
`;

export const Error = styled(Tooltip)`
  height: 1.125rem;
  margin-left: 1rem;

  --mainColor: var(--errorColor);
  --mainColorText: var(--textColor);
`;

tooltip.styles.js

//Tooltip

import styled from 'styled-components';

export const Container = styled.div`
  position: relative;

  --mainColor: var(--orange);
  --mainColorText: var(--primaryDark);

  svg {
    color: var(--mainColor);
  }

  span {
    width: 10rem;
    background: var(--mainColor);
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;

    transition: all 0.4s;

    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);

    color: var(--mainColorText);

    &::before {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-color: var(--mainColor) transparent;
      border-width: 0.375rem 0.375rem 0 0.375rem;
      border-style: solid;

      border-bottom-width: 0;
      content: '';
    }
  }
  svg {
    &:hover + span {
      opacity: 1;
      visibility: visible;
    }
  }
`;