diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js
index 0ed02c74fc9..c9593f0d234 100644
--- a/src-docs/src/views/filter_group/filter_group_example.js
+++ b/src-docs/src/views/filter_group/filter_group_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import { renderToHtml } from '../../services';
@@ -22,7 +22,7 @@ const filterGroupHtml = renderToHtml(FilterGroup);
export const FilterGroupExample = {
title: 'Filter Group',
intro: (
-
+
-
+
),
sections: [{
source: [{
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index 55fb0f587d7..4ef788352ff 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import { renderToHtml } from '../../services';
@@ -72,7 +72,7 @@ const flexGroupResonsiveHtml = renderToHtml(FlexGroupResponsive);
export const FlexExample = {
title: 'Flex',
intro: (
-
+
-
+
),
sections: [{
title: 'FlexGroup is for a single row layout',
diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js
index 5ea4a6fb689..7793716d242 100644
--- a/src-docs/src/views/spacer/spacer_example.js
+++ b/src-docs/src/views/spacer/spacer_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import { renderToHtml } from '../../services';
@@ -20,7 +20,7 @@ const spacerHtml = renderToHtml(Spacer);
export const SpacerExample = {
title: 'Spacer',
intro: (
-
+
-
+
),
sections: [{
source: [{
diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
index 0be8243d6c0..58f4fbff504 100644
--- a/src-docs/src/views/tool_tip/tool_tip.js
+++ b/src-docs/src/views/tool_tip/tool_tip.js
@@ -16,7 +16,6 @@ export default () => (
This tooltip appears on the{' '}
@@ -27,7 +26,6 @@ export default () => (
This tooltip appears on the{' '}
(
This tooltip appears on the{' '}
@@ -51,7 +48,6 @@ export default () => (
This tooltip appears on the bottom of this icon:{' '}
diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js
index 82db91b9dcd..e804f803ddb 100644
--- a/src-docs/src/views/tool_tip/tool_tip_example.js
+++ b/src-docs/src/views/tool_tip/tool_tip_example.js
@@ -7,9 +7,11 @@ import {
} from '../../components';
import {
+ EuiCallOut,
EuiCode,
EuiToolTip,
EuiIconTip,
+ EuiSpacer,
} from '../../../../src/components';
import ToolTip from './tool_tip';
@@ -22,6 +24,20 @@ const infoTipHtml = renderToHtml(IconTip);
export const ToolTipExample = {
title: 'ToolTip',
+ intro: (
+
+
+
+ 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.
+
+
+
+
+
+ ),
sections: [{
source: [{
type: GuideSectionTypes.JS,
diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
index e4740c9b9e9..4567c32c117 100644
--- a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
+++ b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EuiIconTip is rendered 1`] = `
-
-
+
`;
exports[`EuiIconTip props type is rendered as the icon 1`] = `
-
-
+
`;
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap
index ed0eba05692..c6a5cdf0d99 100644
--- a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap
+++ b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EuiToolTip is rendered 1`] = `
-
Trigger
-
+
`;
diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js
index 364b31fd371..6b5e7a9dd44 100644
--- a/src/components/tool_tip/tool_tip.js
+++ b/src/components/tool_tip/tool_tip.js
@@ -90,7 +90,6 @@ export class EuiToolTip extends Component {
className,
content,
title,
- inline,
...rest
} = this.props;
@@ -119,10 +118,8 @@ export class EuiToolTip extends Component {
);
}
- const AnchorElement = inline ? 'span' : 'div';
-
const anchor = (
- this.anchor = anchor}
className="euiToolTipAnchor"
>
@@ -133,7 +130,7 @@ export class EuiToolTip extends Component {
onMouseOver: this.showToolTip,
onMouseOut: this.onMouseOut
})}
-
+
);
return (
@@ -174,11 +171,6 @@ EuiToolTip.propTypes = {
* Unless you provide one, this will be randomly generated.
*/
id: PropTypes.string,
-
- /**
- * Use span instead of div.
- */
- inline: PropTypes.bool,
};
EuiToolTip.defaultProps = {