From 9ea3b97d03c8910d8e94a5ed0ed2be7e2882282a Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 1 Mar 2017 15:07:09 -0700
Subject: [PATCH] Add Tooltip and Center stateless components. Add Tooltip
 story.

---
 ui/src/shared/components/Tooltip.js | 21 +++++++++++++
 ui/stories/admin.js                 | 46 +++++++++++++++++++----------
 ui/stories/components/Center.js     | 14 +++++++++
 3 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/shared/components/Tooltip.js
 create mode 100644 ui/stories/components/Center.js

diff --git a/ui/src/shared/components/Tooltip.js b/ui/src/shared/components/Tooltip.js
new file mode 100644
index 000000000..d8d020552
--- /dev/null
+++ b/ui/src/shared/components/Tooltip.js
@@ -0,0 +1,21 @@
+import React, {PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+const Tooltip = ({tip, children}) => (
+  <div>
+    <div data-tip={tip}>{children}</div>
+    <ReactTooltip effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
+  </div>
+)
+
+const {
+  shape,
+  string,
+} = PropTypes
+
+Tooltip.propTypes = {
+  tip: string,
+  children: shape({}),
+}
+
+export default Tooltip
diff --git a/ui/stories/admin.js b/ui/stories/admin.js
index 2d0101e00..dfc2715d6 100644
--- a/ui/stories/admin.js
+++ b/ui/stories/admin.js
@@ -1,22 +1,38 @@
 import React from 'react'
 import {storiesOf, action, linkTo} from '@kadira/storybook'
+import Center from './components/Center'
+
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
+import Tooltip from 'shared/components/Tooltip'
 
 storiesOf('MultiSelectDropdown', module)
   .add('Select Roles', () => (
-    <MultiSelectDropdown
-      items={[
-        'Admin',
-        'User',
-        'Chrono Giraffe',
-        'Prophet',
-        'Susford',
-      ]}
-      selectedItems={[
-        'User',
-        'Chrono Giraffe',
-      ]}
-      label={'Select Roles'}
-      onApply={action('onApply')}
-    />
+    <Center>
+      <MultiSelectDropdown
+        items={[
+          'Admin',
+          'User',
+          'Chrono Giraffe',
+          'Prophet',
+          'Susford',
+        ]}
+        selectedItems={[
+          'User',
+          'Chrono Giraffe',
+        ]}
+        label={'Select Roles'}
+        onApply={action('onApply')}
+      />
+    </Center>
+  ))
+
+storiesOf('Tooltip', module)
+  .add('Delete', () => (
+    <Center>
+      <Tooltip tip={`Are you sure? TrashIcon`}>
+        <div className="btn btn-info btn-sm">
+          Delete
+        </div>
+      </Tooltip>
+    </Center>
   ))
diff --git a/ui/stories/components/Center.js b/ui/stories/components/Center.js
new file mode 100644
index 000000000..e955c0c19
--- /dev/null
+++ b/ui/stories/components/Center.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Center = ({children}) => (
+  <div style={{
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%)',
+  }}>
+    {children}
+  </div>
+)
+
+export default Center