clean up docs

elastic · Mar 9, 2018 · 3e9ef00 · 3e9ef00
1 parent d2df94b
commit 3e9ef00
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 32 deletions.
diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
@@ -4,39 +4,56 @@ import {
   EuiToolTip,
   EuiLink,
   EuiText,
+  EuiFieldText,
+  EuiSpacer,
+  EuiButton,
 } from '../../../../src/components';
 
 export default () => (
-  <EuiText>
-    <p style={{ overflow: 'hidden' }}>
-      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>left</EuiLink>
-      </EuiToolTip>
-      {' '} and includes the optional title.
-    </p>
-    <p style={{ overflow: 'hidden' }}>
-      This tooltip appears on the{' '}
-      <EuiToolTip position="right" content="Here is some tooltip text">
-        <EuiLink>right</EuiLink>
-      </EuiToolTip>
-    </p>
-    <p style={{ overflow: 'hidden' }}>
-      This tooltip appears on the{' '}
-      <EuiToolTip position="top" content="Here is some tooltip text">
-        <EuiLink>top</EuiLink>
-      </EuiToolTip>
-    </p>
-    <p style={{ overflow: 'hidden' }}>
-      This tooltip appears on the{' '}
-      <EuiToolTip position="bottom" clickOnly content="You need to click or leave focus to dismiss this one.">
-        <EuiLink>bottom</EuiLink>
-      </EuiToolTip>
-      {' '} and requires a <strong>click to activate</strong>.
-    </p>
-  </EuiText>
+  <div>
+    <EuiText>
+      <p style={{ overflow: 'hidden' }}>
+        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>left</EuiLink>
+        </EuiToolTip>
+        {' '} and includes the optional title.
+      </p>
+      <p style={{ overflow: 'hidden' }}>
+        This tooltip appears on the{' '}
+        <EuiToolTip position="right" content="Here is some tooltip text">
+          <EuiLink>right</EuiLink>
+        </EuiToolTip>
+      </p>
+      <p style={{ overflow: 'hidden' }}>
+        This tooltip appears on the{' '}
+        <EuiToolTip position="top" content="Here is some tooltip text">
+          <EuiLink>top</EuiLink>
+        </EuiToolTip>
+      </p>
+      <p style={{ overflow: 'hidden' }}>
+        This tooltip appears on the{' '}
+        <EuiToolTip position="bottom" clickOnly content="You need to click or leave focus to dismiss this one.">
+          <EuiLink>bottom</EuiLink>
+        </EuiToolTip>
+        {' '} and requires a <strong>click to activate</strong>.
+      </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>
 );
diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js
@@ -9,6 +9,8 @@ import {
 import {
   EuiCode,
   EuiToolTip,
+  EuiCallOut,
+  EuiSpacer,
 } from '../../../../src/components';
 
 import ToolTip from './tool_tip';
@@ -17,6 +19,25 @@ const toolTipHtml = renderToHtml(ToolTip);
 
 export const ToolTipExample = {
   title: 'ToolTip',
+  intro: (
+    <div>
+      <EuiCallOut
+        title="Be careful when using tool tips on clickable objects"
+        color="warning"
+      >
+        <p>
+          <strong>Do not use the <EuiCode>clickOnly</EuiCode> prop if you are wrapping
+          a tooltip around an element that is itself clickable</strong>. Also, because
+          our tool tips are accessible through tabbing and focus events this means
+          that any tabbable elements (like buttons or inputs) you nest inside will
+          require two tabs (one for the tool tip and one for the nested item) to
+          cycle through. Usually this isn&apos;t a problem, but keep it in mind.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </div>
+  ),
   sections: [{
     title: 'ToolTip',
     source: [{