From e2d6a024dc8e42c9d41de29d227252058b30ada5 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 10 Aug 2018 16:10:47 -0600 Subject: [PATCH 1/9] copy button that copies text to clipboard --- src-docs/src/views/button/button_copy.js | 13 ++++ src-docs/src/views/button/button_example.js | 19 ++++++ .../button/button_copy/button_copy.js | 62 +++++++++++++++++++ src/components/button/button_copy/index.js | 1 + src/components/button/index.js | 4 ++ src/components/index.js | 1 + src/components/tool_tip/tool_tip.js | 4 ++ src/services/copy_to_clipboard.js | 46 ++++++++++++++ src/services/index.js | 4 ++ 9 files changed, 154 insertions(+) create mode 100644 src-docs/src/views/button/button_copy.js create mode 100644 src/components/button/button_copy/button_copy.js create mode 100644 src/components/button/button_copy/index.js create mode 100644 src/services/copy_to_clipboard.js diff --git a/src-docs/src/views/button/button_copy.js b/src-docs/src/views/button/button_copy.js new file mode 100644 index 00000000000..2ce1917e285 --- /dev/null +++ b/src-docs/src/views/button/button_copy.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { + EuiButtonCopy, +} from '../../../../src/components/'; + +export default () => ( +
+ + Copy + +
+); diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 33792aaeb97..0a8cd01e142 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -56,6 +56,10 @@ import ButtonGroup from './button_group'; const buttonGroupSource = require('!!raw-loader!./button_group'); const buttonGroupHtml = renderToHtml(ButtonGroup); +import ButtonCopy from './button_copy'; +const buttonCopySource = require('!!raw-loader!./button_copy'); +const buttonCopyHtml = renderToHtml(ButtonCopy); + export const ButtonExample = { title: 'Button', sections: [{ @@ -243,5 +247,20 @@ export const ButtonExample = {

), demo: , + }, { + title: 'ButtonCopy', + source: [{ + type: GuideSectionTypes.JS, + code: buttonCopySource, + }, { + type: GuideSectionTypes.HTML, + code: buttonCopyHtml, + }], + text: ( +

+ Copy text to clipboard +

+ ), + demo: , }], }; diff --git a/src/components/button/button_copy/button_copy.js b/src/components/button/button_copy/button_copy.js new file mode 100644 index 00000000000..4e153e1a6d7 --- /dev/null +++ b/src/components/button/button_copy/button_copy.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { copyToClipboard } from '../../../services'; +import { EuiButton } from '../button'; +import { EuiToolTip } from '../../tool_tip'; + +const UNCOPIED_MSG = 'Copy to clipboard'; +const COPIED_MSG = 'Copied'; + +export class EuiButtonCopy extends React.Component { + + constructor(props) { + super(props); + + this.state = { + tooltipText: UNCOPIED_MSG + }; + } + + copySnippet = () => { + const isCopied = copyToClipboard(this.props.textToCopy); + if (isCopied) { + this.setState({ + tooltipText: COPIED_MSG, + }); + } + } + + resetTooltipText = () => { + this.setState({ + tooltipText: UNCOPIED_MSG, + }); + } + + render() { + const { + children, + textToCopy, // eslint-disable-line no-unused-vars + onClick, // eslint-disable-line no-unused-vars + ...rest + } = this.props; + + return ( + + + {children} + + + ); + } +} + +EuiButtonCopy.propTypes = { + textToCopy: PropTypes.string.isRequired, +}; + diff --git a/src/components/button/button_copy/index.js b/src/components/button/button_copy/index.js new file mode 100644 index 00000000000..f782ab72edd --- /dev/null +++ b/src/components/button/button_copy/index.js @@ -0,0 +1 @@ +export { EuiButtonCopy } from './button_copy'; diff --git a/src/components/button/index.js b/src/components/button/index.js index 96feec44188..ebd6a527faa 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -18,3 +18,7 @@ export { export { EuiButtonGroup, } from './button_group'; + +export { + EuiButtonCopy, +} from './button_copy'; diff --git a/src/components/index.js b/src/components/index.js index 4148d1ab284..082ba175132 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -31,6 +31,7 @@ export { EuiButtonIcon, EuiButtonToggle, EuiButtonGroup, + EuiButtonCopy, } from './button'; export { diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js index aa6b1ac0155..a7647a3efca 100644 --- a/src/components/tool_tip/tool_tip.js +++ b/src/components/tool_tip/tool_tip.js @@ -116,6 +116,10 @@ export class EuiToolTip extends Component { this.hideToolTip(); } } + + if (this.props.onMouseOut) { + this.props.onMouseOut(); + } }; render() { diff --git a/src/services/copy_to_clipboard.js b/src/services/copy_to_clipboard.js new file mode 100644 index 00000000000..6b383981e86 --- /dev/null +++ b/src/services/copy_to_clipboard.js @@ -0,0 +1,46 @@ +function createHiddenTextElement(text) { + const textElement = document.createElement('span'); + textElement.textContent = text; + textElement.style.all = 'unset'; + // prevents scrolling to the end of the page + textElement.style.position = 'fixed'; + textElement.style.top = 0; + textElement.style.clip = 'rect(0, 0, 0, 0)'; + // used to preserve spaces and line breaks + textElement.style.whiteSpace = 'pre'; + // do not inherit user-select (it may be `none`) + textElement.style.webkitUserSelect = 'text'; + textElement.style.MozUserSelect = 'text'; + textElement.style.msUserSelect = 'text'; + textElement.style.userSelect = 'text'; + return textElement; +} + +export function copyToClipboard(text) { + let isCopied = true; + const range = document.createRange(); + const selection = window.getSelection(); + const elementToBeCopied = createHiddenTextElement(text); + + document.body.appendChild(elementToBeCopied); + range.selectNode(elementToBeCopied); + selection.removeAllRanges(); + selection.addRange(range); + + if (!document.execCommand('copy')) { + isCopied = false; + console.warn('Unable to copy to clipboard.'); // eslint-disable-line no-console + } + + if (selection) { + if (typeof selection.removeRange === 'function') { + selection.removeRange(range); + } else { + selection.removeAllRanges(); + } + } + + document.body.removeChild(elementToBeCopied); + + return isCopied; +} diff --git a/src/services/index.js b/src/services/index.js index d44ee26f8ad..9bdbd73d641 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -25,6 +25,10 @@ export { DEFAULT_VISUALIZATION_COLOR, } from './color'; +export { + copyToClipboard +} from './copy_to_clipboard'; + export { formatAuto, formatBoolean, From 58590583b6dfe0b6a4721718215ce731d75f9b65 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 10 Aug 2018 16:14:00 -0600 Subject: [PATCH 2/9] change log --- CHANGELOG.md | 2 +- src-docs/src/views/button/button_example.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b69bcf7ba44..c0309a30b8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `3.5.1`. +- Added `EuiButtonCopy` ([#1112](https://github.com/elastic/eui/pull/1112)) ## [`3.5.1`](https://github.com/elastic/eui/tree/v3.5.1) diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 0a8cd01e142..dce2b124fcd 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -258,7 +258,7 @@ export const ButtonExample = { }], text: (

- Copy text to clipboard + Button for copying text to clipboard

), demo: , From c6f32681e8b8742585ecdf957519c066b66789ea Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 13 Aug 2018 12:54:53 -0600 Subject: [PATCH 3/9] move to component under utilities --- src-docs/src/routes.js | 4 ++ src-docs/src/views/button/button_copy.js | 13 ------ src-docs/src/views/button/button_example.js | 19 --------- src-docs/src/views/copy/copy.js | 41 +++++++++++++++++++ src-docs/src/views/copy/copy_example.js | 37 +++++++++++++++++ src/components/button/button_copy/index.js | 1 - src/components/button/index.js | 4 -- .../button_copy.js => copy/copy.js} | 21 ++++------ src/components/copy/index.js | 3 ++ src/components/index.js | 5 ++- 10 files changed, 96 insertions(+), 52 deletions(-) delete mode 100644 src-docs/src/views/button/button_copy.js create mode 100644 src-docs/src/views/copy/copy.js create mode 100644 src-docs/src/views/copy/copy_example.js delete mode 100644 src/components/button/button_copy/index.js rename src/components/{button/button_copy/button_copy.js => copy/copy.js} (60%) create mode 100644 src/components/copy/index.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index f2de5c15871..2f76fc32321 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -87,6 +87,9 @@ import { ComboBoxExample } import { ContextMenuExample } from './views/context_menu/context_menu_example'; +import { CopyExample } + from './views/copy/copy_example'; + import { DatePickerExample } from './views/date_picker/date_picker_example'; @@ -377,6 +380,7 @@ const navigation = [{ name: 'Utilities', items: [ AccessibilityExample, + CopyExample, ResponsiveExample, DelayHideExample, ErrorBoundaryExample, diff --git a/src-docs/src/views/button/button_copy.js b/src-docs/src/views/button/button_copy.js deleted file mode 100644 index 2ce1917e285..00000000000 --- a/src-docs/src/views/button/button_copy.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import { - EuiButtonCopy, -} from '../../../../src/components/'; - -export default () => ( -
- - Copy - -
-); diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index dce2b124fcd..33792aaeb97 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -56,10 +56,6 @@ import ButtonGroup from './button_group'; const buttonGroupSource = require('!!raw-loader!./button_group'); const buttonGroupHtml = renderToHtml(ButtonGroup); -import ButtonCopy from './button_copy'; -const buttonCopySource = require('!!raw-loader!./button_copy'); -const buttonCopyHtml = renderToHtml(ButtonCopy); - export const ButtonExample = { title: 'Button', sections: [{ @@ -247,20 +243,5 @@ export const ButtonExample = {

), demo: , - }, { - title: 'ButtonCopy', - source: [{ - type: GuideSectionTypes.JS, - code: buttonCopySource, - }, { - type: GuideSectionTypes.HTML, - code: buttonCopyHtml, - }], - text: ( -

- Button for copying text to clipboard -

- ), - demo: , }], }; diff --git a/src-docs/src/views/copy/copy.js b/src-docs/src/views/copy/copy.js new file mode 100644 index 00000000000..680fc85b9d8 --- /dev/null +++ b/src-docs/src/views/copy/copy.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react'; + +import { + EuiCopy, + EuiButton, + EuiFieldText, + EuiSpacer, +} from '../../../../src/components/'; + +export default class extends Component { + + state = { + copyText: 'I am the text that will be copied' + } + + onChange = e => { + this.setState({ + copyText: e.target.value, + }); + }; + + render() { + return ( +
+ + + + + + + Click to copy input text + + +
+ ); + } +} diff --git a/src-docs/src/views/copy/copy_example.js b/src-docs/src/views/copy/copy_example.js new file mode 100644 index 00000000000..155ebb4624b --- /dev/null +++ b/src-docs/src/views/copy/copy_example.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import { + EuiCode, + EuiCopy, +} from '../../../../src/components'; + +import Copy from './copy'; +const copySource = require('!!raw-loader!./copy'); +const copyHtml = renderToHtml(Copy); + +export const CopyExample = { + title: 'Copy', + sections: [{ + source: [{ + type: GuideSectionTypes.JS, + code: copySource, + }, { + type: GuideSectionTypes.HTML, + code: copyHtml, + }], + text: ( +

+ The EuiCopy component is a simplified utility for copying text to clipboard. +

+ ), + components: { EuiCopy }, + demo: , + props: { EuiCopy }, + }], +}; diff --git a/src/components/button/button_copy/index.js b/src/components/button/button_copy/index.js deleted file mode 100644 index f782ab72edd..00000000000 --- a/src/components/button/button_copy/index.js +++ /dev/null @@ -1 +0,0 @@ -export { EuiButtonCopy } from './button_copy'; diff --git a/src/components/button/index.js b/src/components/button/index.js index ebd6a527faa..96feec44188 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -18,7 +18,3 @@ export { export { EuiButtonGroup, } from './button_group'; - -export { - EuiButtonCopy, -} from './button_copy'; diff --git a/src/components/button/button_copy/button_copy.js b/src/components/copy/copy.js similarity index 60% rename from src/components/button/button_copy/button_copy.js rename to src/components/copy/copy.js index 4e153e1a6d7..1bc19a7476a 100644 --- a/src/components/button/button_copy/button_copy.js +++ b/src/components/copy/copy.js @@ -1,13 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { copyToClipboard } from '../../../services'; -import { EuiButton } from '../button'; -import { EuiToolTip } from '../../tool_tip'; +import { copyToClipboard } from '../../services'; +import { EuiToolTip } from '../tool_tip'; -const UNCOPIED_MSG = 'Copy to clipboard'; +const UNCOPIED_MSG = 'Copy'; const COPIED_MSG = 'Copied'; -export class EuiButtonCopy extends React.Component { +export class EuiCopy extends React.Component { constructor(props) { super(props); @@ -35,9 +34,6 @@ export class EuiButtonCopy extends React.Component { render() { const { children, - textToCopy, // eslint-disable-line no-unused-vars - onClick, // eslint-disable-line no-unused-vars - ...rest } = this.props; return ( @@ -45,18 +41,15 @@ export class EuiButtonCopy extends React.Component { content={this.state.tooltipText} onMouseOut={this.resetTooltipText} > - + {children} - + ); } } -EuiButtonCopy.propTypes = { +EuiCopy.propTypes = { textToCopy: PropTypes.string.isRequired, }; diff --git a/src/components/copy/index.js b/src/components/copy/index.js new file mode 100644 index 00000000000..fdcffd58765 --- /dev/null +++ b/src/components/copy/index.js @@ -0,0 +1,3 @@ +export { + EuiCopy, +} from './copy'; diff --git a/src/components/index.js b/src/components/index.js index 082ba175132..0213f6fe84f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -31,7 +31,6 @@ export { EuiButtonIcon, EuiButtonToggle, EuiButtonGroup, - EuiButtonCopy, } from './button'; export { @@ -66,6 +65,10 @@ export { EuiContextMenuItem, } from './context_menu'; +export { + EuiCopy, +} from './copy'; + export { EuiDatePicker, EuiDatePickerRange, From c87f029c64e1bd818c5bc8ab47b20da3163736fa Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 13 Aug 2018 12:57:24 -0600 Subject: [PATCH 4/9] update change log --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39741548fc0..b61713b3b62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `EuiButtonCopy` ([#1112](https://github.com/elastic/eui/pull/1112)) +- Added `EuiCopy` ([#1112](https://github.com/elastic/eui/pull/1112)) - Added `disabled` to `EuiRadioGroup.options` ([#1111](https://github.com/elastic/eui/pull/1111)) ## [`3.5.1`](https://github.com/elastic/eui/tree/v3.5.1) From 8c7a378e42c220e6e0c325a0497050fedc85ddd7 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 13 Aug 2018 15:28:53 -0600 Subject: [PATCH 5/9] make children be a function --- src-docs/src/views/copy/copy.js | 8 +++++--- src/components/copy/copy.js | 7 +++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/copy/copy.js b/src-docs/src/views/copy/copy.js index 680fc85b9d8..ee61773db9f 100644 --- a/src-docs/src/views/copy/copy.js +++ b/src-docs/src/views/copy/copy.js @@ -31,9 +31,11 @@ export default class extends Component { - - Click to copy input text - + {(copy) => ( + + Click to copy input text + + )} ); diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index 1bc19a7476a..e648ca1ef50 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -16,7 +16,7 @@ export class EuiCopy extends React.Component { }; } - copySnippet = () => { + copy = () => { const isCopied = copyToClipboard(this.props.textToCopy); if (isCopied) { this.setState({ @@ -41,9 +41,7 @@ export class EuiCopy extends React.Component { content={this.state.tooltipText} onMouseOut={this.resetTooltipText} > - - {children} - + {children(this.copy)} ); } @@ -51,5 +49,6 @@ export class EuiCopy extends React.Component { EuiCopy.propTypes = { textToCopy: PropTypes.string.isRequired, + children: PropTypes.func.isRequired, }; From 9247100e4665116751c734aacf7173e91a50f3d6 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 13 Aug 2018 16:32:19 -0600 Subject: [PATCH 6/9] make copy messages be props --- src/components/copy/copy.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index e648ca1ef50..fdbae70b82b 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -3,16 +3,13 @@ import PropTypes from 'prop-types'; import { copyToClipboard } from '../../services'; import { EuiToolTip } from '../tool_tip'; -const UNCOPIED_MSG = 'Copy'; -const COPIED_MSG = 'Copied'; - export class EuiCopy extends React.Component { constructor(props) { super(props); this.state = { - tooltipText: UNCOPIED_MSG + tooltipText: this.props.beforeCopyMsg }; } @@ -20,14 +17,14 @@ export class EuiCopy extends React.Component { const isCopied = copyToClipboard(this.props.textToCopy); if (isCopied) { this.setState({ - tooltipText: COPIED_MSG, + tooltipText: this.props.afterCopyMsg, }); } } resetTooltipText = () => { this.setState({ - tooltipText: UNCOPIED_MSG, + tooltipText: this.props.beforeCopyMsg, }); } @@ -49,6 +46,13 @@ export class EuiCopy extends React.Component { EuiCopy.propTypes = { textToCopy: PropTypes.string.isRequired, + beforeCopyMsg: PropTypes.string, + afterCopyMsg: PropTypes.string, children: PropTypes.func.isRequired, }; +EuiCopy.defaultProps = { + beforeCopyMsg: 'Copy', + afterCopyMsg: 'Copied', +}; + From 1860b1bdb74d9fda06e53a1ecb2034c4c49b7cd1 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 14 Aug 2018 09:46:43 -0600 Subject: [PATCH 7/9] add comments on props, pass rest, more details in usage example --- src-docs/src/views/copy/copy_example.js | 3 +- src/components/copy/copy.js | 37 ++++++++++++++++++++----- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/copy/copy_example.js b/src-docs/src/views/copy/copy_example.js index 155ebb4624b..e6954463f82 100644 --- a/src-docs/src/views/copy/copy_example.js +++ b/src-docs/src/views/copy/copy_example.js @@ -27,7 +27,8 @@ export const CopyExample = { }], text: (

- The EuiCopy component is a simplified utility for copying text to clipboard. + The EuiCopy component is a utility for copying text to clipboard. + Wrap a function that returns a Component. The first argument will be a `copy` function.

), components: { EuiCopy }, diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index fdbae70b82b..aa1e1c47656 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -9,7 +9,7 @@ export class EuiCopy extends React.Component { super(props); this.state = { - tooltipText: this.props.beforeCopyMsg + tooltipText: this.props.beforeMessage }; } @@ -17,26 +17,31 @@ export class EuiCopy extends React.Component { const isCopied = copyToClipboard(this.props.textToCopy); if (isCopied) { this.setState({ - tooltipText: this.props.afterCopyMsg, + tooltipText: this.props.afterMessage, }); } } resetTooltipText = () => { this.setState({ - tooltipText: this.props.beforeCopyMsg, + tooltipText: this.props.beforeMessage, }); } render() { const { children, + textToCopy, // eslint-disable-line no-unused-vars + beforeMessage, // eslint-disable-line no-unused-vars + afterMessage, // eslint-disable-line no-unused-vars + ...rest } = this.props; return ( {children(this.copy)} @@ -45,14 +50,32 @@ export class EuiCopy extends React.Component { } EuiCopy.propTypes = { + + /** + * Text that will be copied to clipboard when copy function is executed. + */ textToCopy: PropTypes.string.isRequired, - beforeCopyMsg: PropTypes.string, - afterCopyMsg: PropTypes.string, + + /** + * Tooltip message displayed before copy function is called. + */ + beforeMessage: PropTypes.string, + + /** + * Tooltip message displayed after copy function is called that lets the user know that + * 'textToCopy' has been copied to the clipboard. + */ + afterMessage: PropTypes.string, + + /** + * Function that must return a Component. First argument is 'copy' function. + * Use your own logic to create the component that user's interactact with when triggering copy. + */ children: PropTypes.func.isRequired, }; EuiCopy.defaultProps = { - beforeCopyMsg: 'Copy', - afterCopyMsg: 'Copied', + beforeMessage: 'Copy', + afterMessage: 'Copied', }; From 45c41d992a2a4313a7021df9208b9c3101a3632f Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 14 Aug 2018 10:46:54 -0600 Subject: [PATCH 8/9] do not provide default beforeMessage --- src/components/copy/copy.js | 3 +-- src/components/tool_tip/tool_tip.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index aa1e1c47656..a505632f742 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -65,7 +65,7 @@ EuiCopy.propTypes = { * Tooltip message displayed after copy function is called that lets the user know that * 'textToCopy' has been copied to the clipboard. */ - afterMessage: PropTypes.string, + afterMessage: PropTypes.string.isRequired, /** * Function that must return a Component. First argument is 'copy' function. @@ -75,7 +75,6 @@ EuiCopy.propTypes = { }; EuiCopy.defaultProps = { - beforeMessage: 'Copy', afterMessage: 'Copied', }; diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js index a7647a3efca..a86df900989 100644 --- a/src/components/tool_tip/tool_tip.js +++ b/src/components/tool_tip/tool_tip.js @@ -146,7 +146,7 @@ export class EuiToolTip extends Component { ); let tooltip; - if (visible) { + if (visible && content) { tooltip = ( Date: Tue, 14 Aug 2018 12:04:43 -0600 Subject: [PATCH 9/9] besure to check for title in tooltip --- src/components/tool_tip/tool_tip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js index a86df900989..21f58ef27cc 100644 --- a/src/components/tool_tip/tool_tip.js +++ b/src/components/tool_tip/tool_tip.js @@ -146,7 +146,7 @@ export class EuiToolTip extends Component { ); let tooltip; - if (visible && content) { + if (visible && (content || title)) { tooltip = (