Add Tooltip and Center stateless components. Add Tooltip story.

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

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
+    <Center>
-      items={[
+      <MultiSelectDropdown
-        'Admin',
+        items={[
-        'User',
+          'Admin',
-        'Chrono Giraffe',
+          'User',
-        'Prophet',
+          'Chrono Giraffe',
-        'Susford',
+          'Prophet',
-      ]}
+          'Susford',
-      selectedItems={[
+        ]}
-        'User',
+        selectedItems={[
-        'Chrono Giraffe',
+          'User',
-      ]}
+          'Chrono Giraffe',
-      label={'Select Roles'}
+        ]}
-      onApply={action('onApply')}
+        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>
   ))

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