- This tooltip has a long delay because it might be in a repeatable
- component{' '}
+ This tooltip has a long delay because it might be in
+ a repeatable component{' '}
wink
+ .
@@ -54,41 +55,5 @@ export default () => (
-
-
-
-
-
-
- I am a block level tooltip, applied to a button with fullWidth
-
-
-
-
-
-
-
-
-
-
-
-
-
- Works on any kind of element — buttons, inputs, you name it!
-
- }
- >
- {}}>Hover me
-
);
diff --git a/src-docs/src/views/tool_tip/tool_tip_components.js b/src-docs/src/views/tool_tip/tool_tip_components.js
new file mode 100644
index 00000000000..2b1d495e4ff
--- /dev/null
+++ b/src-docs/src/views/tool_tip/tool_tip_components.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+ EuiToolTip,
+ EuiFieldText,
+ EuiSpacer,
+ EuiButton,
+} from '../../../../src/components';
+
+export default () => (
+
+
+ Works on any kind of element — buttons, inputs, you name it!
+
+ }
+ >
+ {}}>Hover me
+
+
+
+
+
+
+ I am a block level tooltip, applied to a button with fullWidth
+
+
+
+
+
+
+
+
+
- EuiToolTip wraps its children in a span element, so if you pass in a
- block-level child (e.g. a div) the resulting DOM will be in violation of
- the HTML5 spec.
+ Generally, tooltips should provide short, non-essential
+ , contextual information, usually naming or describing with more detail.
+ If you need interactive content or anything other than text, we
+ recommend using{' '}
+
+ EuiPopover
+ {' '}
+ instead.
-
+
+
+ Putting anything other than plain text in a tooltip is lost on
+ screen readers.
+
+ }
+ />
+
),
sections: [
{
@@ -60,29 +78,11 @@ export const ToolTipExample = {
<>
Wrap EuiToolTip around any item that you need a
- tooltip for. The position prop will take a
- suggested position, but will change it if the tooltip gets too close
- to the edge of the screen.
-
-
-
-
- Applying tooltips to custom components
-
-
-
-
- Internally, EuiToolTip applies{' '}
- onFocus, onBlur,{' '}
- onMouseOver, and onMouseOut{' '}
- props to whatever you pass as children. If you
- pass in a custom component, then you’ll need to make sure
- these props are applied to the root element rendered by your
- component. The best way to do that is to follow{' '}
-
- EUI’s guidelines on pass-through props
-
- .
+ tooltip for and provide the content and
+ optionally the title. The{' '}
+ position prop will take a suggested position, but
+ will change it if the tooltip gets too close to the edge of the
+ screen.
}
/>
-
-
-
-
- Putting anything other than plain text in a tooltip is lost on
- screen readers. Consider switching to{' '}
-
- EuiPopover
- {' '}
- if you need more content inside a tooltip.
-
- }
- />
),
source: [
@@ -119,28 +102,52 @@ export const ToolTipExample = {
type: GuideSectionTypes.JS,
code: toolTipSource,
},
- {
- type: GuideSectionTypes.HTML,
- code: toolTipHtml,
- },
],
-
props: { EuiToolTip },
snippet: tooltipSnippet,
demo: ,
+ playground: toolTipConfig,
},
{
- title: 'IconTip',
+ title: 'Wrapping components',
+ text: (
+ <>
+
+ EuiToolTip wraps its children in a{' '}
+ {''} element that is{' '}
+ {'display: inline-block'}. If you
+ are wrapping a block-level child (e.g. a{' '}
+ {'
'}
+ ), you may need to change this by passing{' '}
+ {'display="block"'} but the
+ resulting DOM may be in violation of the HTML5 spec.
+
+
+ It also applies onFocus and{' '}
+ onBlur props the the cloned{' '}
+ children. If you pass in a custom component, then
+ you’ll need to make sure these props are applied to the root
+ element rendered by your component. The best way to do that is to
+ follow{' '}
+
+ EUI’s guidelines on pass-through props
+
+ .
+