Styled components

.js

const info = `
    font-size: 18px;
    margin: 2px 2px 2px 10px;
    color: rgba(0, 51, 141, 1);
`;

const tooltipText = `
    font-weight: normal;
    text-align: left;

    &.html-value {
        font-weight: bold;
        margin-bottom: 10px;
    }
`;

const tooltipLink = `
    float: left;
    color: rgba(0, 82, 156, 1);
    margin: 15px 0 0 0;
    font-weight: 600;
    cursor: pointer;
    font-style: normal;
`;

const tooltipBox = `
    opacity: 1 !important;
`;

const reactTooltipStyles = `
    .__react_component_tooltip.type-dark{
        color: black;
        border: 1px solid rgb(194, 193, 192);
        background-color: white;
        box-shadow: 1px 1px #888888;
        max-width: 270px;
    }

    @media only screen and (min-width:320px) and (max-width:480px) {
        .__react_component_tooltip.type-dark{
            margin-left: 10%;
        }
        .__react_component_tooltip:before, .__react_component_tooltip:after {
            content: none
        }
    }
`;

export { info, tooltipText, tooltipLink, tooltipBox, reactTooltipStyles };

gistfile1.txt

import React from 'react';
import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';
import isEmpty from 'lodash/isEmpty';
import {
  info,
  tooltipText,
  tooltipLink,
  tooltipBox,
  reactTooltipStyles
} from './tooltipStyles';

const StyledIcon = styled.i.attrs(props => ({
  className: props.faIcon ? props.faIcon : 'fa fa-info-circle'
}))`
  ${props => (!isEmpty(props.theme) ? props.theme : info)}
`;

const StyledReactTooltip = styled(ReactTooltip)`
  ${props => (!isEmpty(props.theme) ? props.theme : tooltipBox)}
`;

const StyledTooltip = styled.span`
  ${reactTooltipStyles}
`;

const StyledTooltipLink = styled.a.attrs(props => ({
  href: props.link ? 'http://www.aaa.com/join' : '#'
}))`
  ${props => (!isEmpty(props.theme) ? props.theme : tooltipLink)}
`;

const TooltipText = styled.span`
  ${props => (!isEmpty(props.theme) ? props.theme : tooltipText)}
`;

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

const Tooltip = props => {
  const {
    value,
    id,
    delay,
    link,
    className,
    faIcon,
    iconTheme,
    tooltipTheme,
    textTheme,
    linkTheme
  } = props;

  return (
    <StyledTooltip className={className}>
      <StyledIcon data-tip data-for={id} theme={iconTheme} faIcon={faIcon} />
      <StyledReactTooltip
        id={id}
        delayShow={100}
        delayHide={delay || 100}
        clickable
        wrapper="span"
        theme={tooltipTheme}
        globalEventOff={isMobile ? 'touchstart' : undefined}
      >
        <TooltipText theme={textTheme}>{value}</TooltipText>
        {link && (
          <div>
            <StyledTooltipLink
              link={link}
              target="_blank"
              rel="noopener noreferrer"
              theme={linkTheme}
            >
              {link}
            </StyledTooltipLink>
          </div>
        )}
      </StyledReactTooltip>
    </StyledTooltip>
  );
};

export default Tooltip;