- client: Use the same tooltip style everywhere

Close #1866

Squashed commit of the following:

commit 3347832caa33b01a0155b212987f02dc4824ab08
Merge: 7766502d d794b11e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 15:12:45 2020 +0300

    Merge branch 'master' into fix/1866

commit 7766502d4a904ad0a4d240481f7eabf0e25cfb62
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 12:16:59 2020 +0300

    Fix icon color classes

commit 90191bf74b5eb1855c733c226f7acb4e906c7ad9
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 17 11:46:22 2020 +0300

    Use logs icons, use pointer cursor, fix review markup formatting

commit 0ba50fcd956101f5054ce38c2329df3e8abdfcd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 18:05:30 2020 +0300

    Use help cursor on tooltips

commit bf4e14afe69f874d29be73d8cd4cfbe240ca0304
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:41:47 2020 +0300

    Use tooltip in logs, rename tooltip classes

commit 00568fdc8e8484c5bae67c51ee8189a3a558e219
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 16 17:01:49 2020 +0300

    - client: Use the same tooltip style everywhere

client/src/components/ui/Tooltip.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import TooltipTrigger from 'react-popper-tooltip';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { HIDE_TOOLTIP_DELAY } from '../../helpers/constants';
+import 'react-popper-tooltip/dist/styles.css';
+import './Tooltip.css';
+
+const Tooltip = ({
+    children,
+    content,
+    triggerClass = 'tooltip-custom__trigger',
+    className = 'tooltip-container',
+    placement = 'bottom',
+    trigger = 'hover',
+    delayHide = HIDE_TOOLTIP_DELAY,
+}) => {
+    const { t } = useTranslation();
+
+    return <TooltipTrigger
+        placement={placement}
+        trigger={trigger}
+        delayHide={delayHide}
+        tooltip={({
+            tooltipRef,
+            getTooltipProps,
+        }) => <div {...getTooltipProps({
+            ref: tooltipRef,
+            className,
+        })}>
+            {typeof content === 'string' ? t(content) : content}
+        </div>
+        }>{({ getTriggerProps, triggerRef }) => <span
+        {...getTriggerProps({
+            ref: triggerRef,
+            className: triggerClass,
+        })}
+    >{children}</span>}
+    </TooltipTrigger>;
+};
+
+Tooltip.propTypes = {
+    children: propTypes.element.isRequired,
+    content: propTypes.oneOfType(
+        [
+            propTypes.string,
+            propTypes.element,
+            propTypes.arrayOf(propTypes.element),
+        ],
+    ).isRequired,
+    placement: propTypes.string,
+    trigger: propTypes.string,
+    delayHide: propTypes.string,
+    className: propTypes.string,
+    triggerClass: propTypes.string,
+};
+
+export default Tooltip;