Tooltips

tooltips.js

const returnTooltip = props => {
  switch (props.tipLocation) {
    case 'top-left':
      return `
          &:after {
            bottom: calc(100% + 5px);
            right: 0;
          }
          &:before {
            right: calc(50% - 5px);
            bottom: 100%
      	    border-bottom-width: 0;
      	    border-top-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
    case 'top-right':
      return `
          &:after {
            bottom: calc(100% + 5px);
            left: 0;
          }
          &:before {
            left: calc(50% - 5px);
            bottom: 100%;
      	    border-bottom-width: 0;
      	    border-top-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
    case 'right':
    default:
      return `
          &:after {
            left: calc(100% + 5px);
            top: 50%;
            transform: translateY(-50%);
          }
          &:before{
            left: 100%;
            top: calc(50% - 5px);
            border-left-width: 0;
            border-right-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
    case 'bottom-left':
      return `
          &:after {
            top: calc(100% + 5px);
            right: 0;
          }
          &:before {
            right: calc(50% - 5px);
            top: 100%
      	    border-top-width: 0;
      	    border-bottom-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
    case 'bottom-right':
      return `
          &:after {
            top: calc(100% + 5px);
            left: 0;
          }
          &:before {
            right: calc(50% - 5px);
            top: 100%;
      	    border-top-width: 0;
      	    border-bottom-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
    case 'left':
      return `
          &:after {
            right: calc(100% + 5px);
            top: 50%;
            transform: translateY(-50%);
          }
          &:before{
            right: 100%;
            top: calc(50% - 5px);
            border-right-width: 0;
            border-left-color: ${props.onboarding ? props.theme.brand.alt : props.theme.bg.reverse};
          }
      `;
  }
};

export const Tooltip = props => css`
	position: relative;

	&:after,
	&:before {
		line-height: 1;
		user-select: none;
		pointer-events: none;
		position: absolute;
		opacity: 0;
		display: block;
		text-transform: none;
	}

	&:before {
		content: '';
		z-index: 9999;
		border: 5px solid transparent;
  }

	&:after {
		content: ${props.tipText && !props.onboarding ? `'${props.tipText}'` : `''`};
    z-index: 9998;
    ${fontStack};
    font-size: 14px;
    font-weight: 500;
		min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: ${Shadow.mid} ${hexa(props.theme.bg.reverse, 0.25)};
    background: ${props.theme.bg.reverse};
    color: ${props.theme.text.reverse};
	}

  ${props.tipText && !props.onboarding ? returnTooltip(props) : ''};

	&:hover:after,
	&:hover:before {
		opacity: 1;
		transition: all 0.1s ease-in 0.1s;
  }
`;