diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c7e55876813..45154048bffd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,15 @@ **Bug fixes** -- Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557)) +- Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557), [#564](https://github.com/elastic/eui/pull/564)) - Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546)) - Added ‘baseline’ as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546)) +**Breaking changes** + +- `EuiToolTip` now defaults to using a `div` instead of a `span` to wrap the anchor. Specify +`inline={true}` to use a `span`. ([#564](https://github.com/elastic/eui/pull/564)) + # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33) - Added initial sorting option to `EuiInMemoryTable` ([#547](https://github.com/elastic/eui/pull/547)) diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js index d82979cf1379..0be8243d6c09 100644 --- a/src-docs/src/views/tool_tip/tool_tip.js +++ b/src-docs/src/views/tool_tip/tool_tip.js @@ -15,7 +15,11 @@ export default () => (

This tooltip appears on the{' '} - + top

@@ -23,6 +27,7 @@ export default () => (

This tooltip appears on the{' '} (

This tooltip appears on the{' '} - + right

This tooltip appears on the bottom of this icon:{' '} - +

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 acd4d41f6ac9..e4740c9b9e99 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,9 @@ // 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 389c48a626a8..ed0eba056922 100644 --- a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap +++ b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap @@ -1,11 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiToolTip is rendered 1`] = ` - +
- +
`; diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index 99037652415c..9fc4f6e45f3a 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -70,6 +70,9 @@ } } +.euiToolTipAnchor { + display: inline-block; +} // Keyframes to animate in the tooltip. @keyframes euiToolTipTop { diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js index ae38ee29835e..364b31fd3717 100644 --- a/src/components/tool_tip/tool_tip.js +++ b/src/components/tool_tip/tool_tip.js @@ -75,13 +75,12 @@ export class EuiToolTip extends Component { }; onMouseOut = (e) => { - if (e.target !== e.currentTarget) { - // We've moused out of a child element, but we haven't yet left the root trigger element. - return; - } - - if (!this.state.hasFocus) { - this.hideToolTip(); + // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has + // left the anchor for a non-child. + if (this.anchor === e.relatedTarget || !this.anchor.contains(e.relatedTarget)) { + if (!this.state.hasFocus) { + this.hideToolTip(); + } } }; @@ -91,6 +90,7 @@ export class EuiToolTip extends Component { className, content, title, + inline, ...rest } = this.props; @@ -119,8 +119,13 @@ export class EuiToolTip extends Component { ); } - const trigger = ( - this.anchor = anchor}> + const AnchorElement = inline ? 'span' : 'div'; + + const anchor = ( + this.anchor = anchor} + className="euiToolTipAnchor" + > {cloneElement(children, { onFocus: this.showToolTip, onBlur: this.hideToolTip, @@ -128,12 +133,12 @@ export class EuiToolTip extends Component { onMouseOver: this.showToolTip, onMouseOut: this.onMouseOut })} - + ); return ( - {trigger} + {anchor} {tooltip} ); @@ -169,6 +174,11 @@ EuiToolTip.propTypes = { * Unless you provide one, this will be randomly generated. */ id: PropTypes.string, + + /** + * Use span instead of div. + */ + inline: PropTypes.bool, }; EuiToolTip.defaultProps = {