tooltip component (#174)

* tooltip from pivotal-ui

* updates from bevacqua review

* add title property

* update demo with warning and show source + html

* put title in tooltip-content div

* do not allow tooltip to overflow window bounds

* add space to demos

* fix lint errors

* check cross dimension for tooltip placement

* rename cross dimension overflow function for better readability

* ensure tooltip opened by click does not get clipped by window viewport

* move overflow logic to service

src-docs/src/services/routes/routes.js

@@ -124,6 +124,10 @@ import { TitleExample }
 import { ToastExample }
   from '../../views/toast/toast_example';
 
+import { TooltipExample }
+  from '../../views/tooltip/tooltip_example';
+
+
 // Sandboxes
 
 import AdvancedSettingsSandbox
@@ -201,6 +205,7 @@ const components = [
   TextExample,
   TitleExample,
   ToastExample,
+  TooltipExample,
 ].map(example => createExample(example));
 
 const sandboxes = [{

src-docs/src/views/tooltip/examples.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  TooltipTrigger,
+} from '../../../../src/components';
+
+const autoPlacementTooltip = `I should be on the top but may get placed in another location
+if I overflow the browser window. This will come in handy when tooltips get placed near the top
+of pages. Its very hard to read a tooltip when part of it gets cut off and if you can't read it
+then what is the point?`;
+
+export default () => (
+  <div>
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip="I am the body" title="I am the title">
+          <span className="overlay-trigger" tabIndex="0"> tooltip with title.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip={autoPlacementTooltip} placement="top" size="m">
+          <span className="overlay-trigger" tabIndex="0"> tooltip on the top.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip={autoPlacementTooltip} placement="top" size="m" trigger="click">
+          <span className="overlay-trigger" tabIndex="0"> tooltip on click.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip="I should be on the left" placement="left">
+          <span className="overlay-trigger" tabIndex="0"> tooltip on the left.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip="I should be on the right" placement="right">
+          <span className="overlay-trigger" tabIndex="0"> tooltip on the right.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+
+    <div>
+      Check out this {(
+        <TooltipTrigger tooltip="I should be on the bottom" placement="bottom">
+          <span className="overlay-trigger" tabIndex="0"> tooltip on the bottom.</span>
+        </TooltipTrigger>
+      )}
+    </div>
+  </div>
+);

src-docs/src/views/tooltip/tooltip_example.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCallOut,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import TooltipExamples from './examples';
+const examplesSource = require('!!raw-loader!./examples');
+const examplesHtml = renderToHtml(TooltipExamples);
+
+export const TooltipExample = {
+  title: 'Tooltip',
+  intro: (
+    <div>
+      <EuiCallOut
+        title="Work in progress"
+        color="warning"
+      >
+        <p>
+          This component is still undergoing active development, and its interface and implementation
+          are both subject to change.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </div>
+  ),
+  sections: [{
+    title: 'Tooltip',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: examplesSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: examplesHtml,
+    }],
+    text: (
+      <p />
+    ),
+    demo: <TooltipExamples />,
+  }],
+};

src/components/index.js

@@ -202,6 +202,11 @@ export {
   EuiToast,
 } from './toast';
 
+export {
+  Tooltip,
+  TooltipTrigger
+} from './tooltip';
+
 export {
   EuiTitle,
 } from './title';

src/components/index.scss

@@ -34,4 +34,5 @@
 @import 'tabs/index';
 @import 'title/index';
 @import 'toast/index';
+@import 'tooltip/index';
 @import 'text/index';

src/components/tooltip/_index.scss

@@ -0,0 +1 @@
+@import "tooltip";