Refactor EuiToolTip, add EuiPortal

CHANGELOG.md

@@ -4,6 +4,10 @@
 - Added `initialPageSize` option to `EuiInMemoryTable` ([#477](https://github.com/elastic/eui/pull/477))
 - Added design guidelines for button and toast usage ([#371](https://github.com/elastic/eui/pull/371))
 
+**Breaking changes**
+
+- Complete refactor of `EuiToolTip`. They now work. Only a breaking change if you were using them. ([#484](https://github.com/elastic/eui/pull/484))
+
 # [`0.0.24`](https://github.com/elastic/eui/tree/v0.0.24)
 
 - Removed hover and focus states from non-selectable `EuiSideNavItem`s ([#434](https://github.com/elastic/eui/pull/434))

src-docs/src/routes.js

@@ -143,6 +143,9 @@ import { PanelExample }
 import { PopoverExample }
   from './views/popover/popover_example';
 
+import { PortalExample }
+  from './views/portal/portal_example';
+
 import { ProgressExample }
   from './views/progress/progress_example';
 
@@ -176,8 +179,8 @@ import { TitleExample }
 import { ToastExample }
   from './views/toast/toast_example';
 
-import { TooltipExample }
-  from './views/tooltip/tooltip_example';
+import { ToolTipExample }
+  from './views/tool_tip/tool_tip_example';
 
 /**
  * Lowercases input and replaces spaces with hyphens:
@@ -283,7 +286,7 @@ const navigation = [{
     TextExample,
     TitleExample,
     ToastExample,
-    TooltipExample,
+    ToolTipExample,
   ].map(example => createExample(example)),
 }, {
   name: 'Forms',
@@ -304,6 +307,7 @@ const navigation = [{
     ErrorBoundaryExample,
     IsColorDarkExample,
     OutsideClickDetectorExample,
+    PortalExample,
   ].map(example => createExample(example)),
 }].map(({ name, items, ...rest }) => ({
   name,

src-docs/src/views/portal/portal.js

@@ -0,0 +1,49 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiPortal,
+  EuiButton,
+  EuiBottomBar,
+} from '../../../../src/components';
+
+export class Portal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPortalVisible: false,
+    };
+
+    this.togglePortal = this.togglePortal.bind(this);
+  }
+
+  togglePortal() {
+    this.setState(prevState => ({ isPortalVisible: !prevState.isPortalVisible }));
+  }
+
+  render() {
+
+    let portal;
+
+    if (this.state.isPortalVisible) {
+      portal = (
+        <EuiPortal>
+          <EuiBottomBar>
+            <p>This element is appended to the body in the DOM if you inspect</p>
+          </EuiBottomBar>
+        </EuiPortal>
+      );
+    }
+    return (
+      <div>
+        <EuiButton onClick={this.togglePortal}>
+          Toggle portal
+        </EuiButton>
+
+        {portal}
+      </div>
+    );
+  }
+}

src-docs/src/views/portal/portal_example.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiPortal,
+} from '../../../../src/components';
+
+import { Portal } from './portal';
+const portalSource = require('!!raw-loader!./portal');
+const portalHtml = renderToHtml(Portal);
+
+export const PortalExample = {
+  title: 'Portal',
+  sections: [{
+    title: 'Portal',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: portalSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: portalHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiPortal</EuiCode> allows you to append its contained children
+        onto the document body. It is useful for moving fixed elements like modals,
+        tooltips or toasts when you are worried about a z-index or overflow conflict.
+      </p>
+    ),
+    components: { EuiPortal },
+    demo: <Portal />,
+  }],
+};

src-docs/src/views/tool_tip/tool_tip.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {
+  EuiIcon,
+  EuiToolTip,
+  EuiLink,
+  EuiText,
+  EuiFieldText,
+  EuiSpacer,
+  EuiButton,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiText>
+      <p>
+        This tooltip appears on the{' '}
+        <EuiToolTip position="top" content="Here is some tooltip text">
+          <EuiLink href="#">top</EuiLink>
+        </EuiToolTip>
+      </p>
+
+      <p>
+        This tooltip appears on the{' '}
+        <EuiToolTip
+          position="left"
+          title="Tooltip titles are optional"
+          content="Here is some tooltip text. Lets add some more content to see how it wraps."
+        >
+          <EuiLink href="#">left</EuiLink>
+        </EuiToolTip>
+        {' '} and includes the optional title.
+      </p>
+
+      <p>
+        This tooltip appears on the{' '}
+        <EuiToolTip position="right" content="Here is some tooltip text">
+          <EuiLink href="#">right</EuiLink>
+        </EuiToolTip>
+      </p>
+
+      <p>
+        This tooltip appears on the bottom of this icon:{' '}
+        <EuiToolTip position="bottom" content="Here is some tooltip text">
+          <EuiIcon tabIndex="0" type="alert" title="Icon with tooltip" />
+        </EuiToolTip>
+      </p>
+    </EuiText>
+
+    <EuiSpacer />
+
+    <EuiToolTip position="right" content="Works on anything">
+      <EuiFieldText placeholder="Hover over me" />
+    </EuiToolTip>
+
+    <EuiSpacer />
+
+    <EuiToolTip position="top" content="Works on anything">
+      <EuiButton onClick={() => alert('Buttons are still clickable within tooltips.')}>Hover over me</EuiButton>
+    </EuiToolTip>
+  </div>
+);

src-docs/src/views/tool_tip/tool_tip_example.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiToolTip,
+} from '../../../../src/components';
+
+import ToolTip from './tool_tip';
+const toolTipSource = require('!!raw-loader!./tool_tip');
+const toolTipHtml = renderToHtml(ToolTip);
+
+export const ToolTipExample = {
+  title: 'ToolTip',
+  sections: [{
+    title: 'ToolTip',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: toolTipSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: toolTipHtml,
+    }],
+    text: (
+      <p>
+        Wrap <EuiCode>EuiToolTip</EuiCode> around any item that you need a tooltip for.
+        The <EuiCode>position</EuiCode> prop will take a suggested position, but will
+        change it if the tool tip gets too close to the edge of the screen. You can use
+        the <EuiCode>clickOnly</EuiCode> prop to tell the too tip to only appear on click
+        wrather than on hover.
+      </p>
+    ),
+    props: { EuiToolTip },
+    demo: <ToolTip />,
+  }],
+};

src/components/index.js

@@ -204,6 +204,10 @@ export {
   EuiPopoverTitle,
 } from './popover';
 
+export {
+  EuiPortal,
+} from './portal';
+
 export {
   EuiProgress,
 } from './progress';
@@ -260,9 +264,8 @@ export {
 } from './toast';
 
 export {
-  Tooltip,
-  TooltipTrigger
-} from './tooltip';
+  EuiToolTip,
+} from './tool_tip';
 
 export {
   EuiTitle,

src/components/index.scss

@@ -44,5 +44,5 @@
 @import 'tabs/index';
 @import 'title/index';
 @import 'toast/index';
-@import 'tooltip/index';
+@import 'tool_tip/index';
 @import 'text/index';