From 483bef87291c6fcc0ac3550df13363aa853fce20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 7 Oct 2018 10:29:45 +0100
Subject: [PATCH] feat(ui): add a tooltip component

---
 ui/package.json                           |  1 +
 ui/src/Components/TooltipWrapper/index.js | 17 +++++++++++++++++
 ui/yarn.lock                              |  9 ++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/Components/TooltipWrapper/index.js

diff --git a/ui/package.json b/ui/package.json
index 592f9e965..9af8ecbbb 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -43,6 +43,7 @@
     "react-resize-detector": "3.1.3",
     "react-scripts": "2.0.4",
     "react-select": "2.1.0",
+    "react-tippy": "1.2.3",
     "react-transition-group": "2.5.0",
     "whatwg-fetch": "3.0.0"
   },
diff --git a/ui/src/Components/TooltipWrapper/index.js b/ui/src/Components/TooltipWrapper/index.js
new file mode 100644
index 000000000..590143a4c
--- /dev/null
+++ b/ui/src/Components/TooltipWrapper/index.js
@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Tooltip } from "react-tippy";
+
+import "react-tippy/dist/tippy.css";
+
+const TooltipWrapper = ({ children, ...props }) => (
+  <Tooltip delay={[1000, 100]} size="small" touchHold={true} {...props}>
+    {children}
+  </Tooltip>
+);
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { TooltipWrapper };
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 2b21cb319..da2f09706 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -8135,7 +8135,7 @@ pnp-webpack-plugin@1.1.0:
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.1.0.tgz#947a96d1db94bb5a1fc014d83b581e428699ac8c"
   integrity sha512-CPCdcFxx7fEcDMWTDjXe2Wypt4JuMt4q5Q2UrpTcyBBkLiCIyPEh/mCGmUWIcNkKGyXwQ9Y2wVhlKm6ketiBNQ==
 
-popper.js@^1.14.1:
+popper.js@^1.11.1, popper.js@^1.14.1:
   version "1.14.4"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
   integrity sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=
@@ -9324,6 +9324,13 @@ react-themeable@^1.1.0:
   dependencies:
     object-assign "^3.0.0"
 
+react-tippy@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.3.tgz#8aef183ec4986ca7c5c556465013d95196fecfd8"
+  integrity sha512-cEmhw29DbVP33n9ayo0nLzibuSz6o0A77cZtzno7zGsfOH8tUEGai/8a7TXRIKHPYDooW8iJkJBIPDnxmEu00g==
+  dependencies:
+    popper.js "^1.11.1"
+
 react-transition-group@2.5.0, react-transition-group@^2.2.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"