[UI core library] Tooltip

[aigoncharov]

https://www.figma.com/file/kaC3jgqMSgqMEgnv7TIse1/%F0%9F%93%90Sign-in-flow?node-id=118%3A2349

Implement only the desktop version

1. Create a component with API (match existing HzTooltip)
   1. overlay
   2. visible

[aigoncharov]

Previous implementation

import React, { FC, ReactElement } from 'react'
import Tooltip from 'rc-tooltip'
import { TooltipProps } from 'rc-tooltip/lib/Tooltip'

import 'rc-tooltip/assets/bootstrap.css'

import styles from './HzTooltip.module.scss'

export type HzTooltipProps = TooltipProps & {
  wrapMaxWidth?: boolean
  wrapElement?: boolean
}

export const HzTooltip: FC<
  HzTooltipProps & {
    children: ReactElement
  }
> = ({
  overlay,
  wrapMaxWidth = true,
  wrapElement = false,
  children,
  ...props
}) => {
  return overlay ? (
    <Tooltip
      overlay={
        wrapMaxWidth ? <div className={styles.wrapper}>{overlay}</div> : overlay
      }
      {...props}
    >
      {wrapElement ? (
        // TODO: remove once https://github.com/react-component/tooltip/issues/18#issuecomment-411476678 has been resolved
        <div style={{ display: 'inline-block' }}>{children}</div>
      ) : (
        children
      )}
    </Tooltip>
  ) : (
    children
  )
}

.wrapper {
  max-width: 550px;
  word-wrap: break-word;
}