From f22fca31b232efbcd0bfe2eba3573ada7cf76fff Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 14:16:35 +0530 Subject: [PATCH 1/6] @W-15246641 : fix for Disappearing tooltip button content --- components/tooltip/index.jsx | 73 +++++++++++++++++++++--------------- 1 file changed, 43 insertions(+), 30 deletions(-) diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index db4361566..380ea71a0 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -292,10 +292,8 @@ class Tooltip extends React.Component { React.cloneElement(child, { key: i, // eslint-disable-line react/no-array-index-key 'aria-describedby': this.getIsOpen() ? this.getId() : undefined, - onBlur: this.handleMouseLeave, onFocus: this.handleMouseEnter, onMouseEnter: this.handleMouseEnter, - onMouseLeave: this.handleMouseLeave, }) ); } @@ -318,30 +316,32 @@ class Tooltip extends React.Component { const deprecatedWay = this.props.variant === 'error'; return isOpen ? ( - <Dialog - closeOnTabKey - hasNubbin - contentsClassName={classNames( - 'slds-popover', - 'slds-popover_tooltip', - { - 'slds-theme_error': this.props.theme === 'error' || deprecatedWay, - }, - this.props.dialogClassName - )} - align={align} - context={this.context} - hasStaticAlignment={this.props.hasStaticAlignment} - onClose={this.handleCancel} - onRequestTargetElement={() => this.getTooltipTarget()} - position={this.props.position} - variant="tooltip" - containerProps={{ - id: this.getId(), - }} - > - {this.getTooltipContent()} - </Dialog> + <div onMouseLeave={this.handleMouseLeave}> + <Dialog + closeOnTabKey + hasNubbin + contentsClassName={classNames( + 'slds-popover', + 'slds-popover_tooltip', + { + 'slds-theme_error': this.props.theme === 'error' || deprecatedWay, + }, + this.props.dialogClassName + )} + align={align} + context={this.context} + hasStaticAlignment={this.props.hasStaticAlignment} + onClose={this.handleCancel} + onRequestTargetElement={() => this.getTooltipTarget()} + position={this.props.position} + variant="tooltip" + containerProps={{ + id: this.getId(), + }} + > + {this.getTooltipContent()} + </Dialog> + </div> ) : ( <span /> ); @@ -405,12 +405,24 @@ class Tooltip extends React.Component { handleMouseLeave = () => { clearTimeout(this.tooltipTimeout); - this.tooltipTimeout = setTimeout(() => { - if (!this.isUnmounting) { - this.setState({ - isOpen: false, + try { + const hoveredElement = document.getElementsByClassName( + 'slds-popover_tooltip' + ); + console.log(hoveredElement); + hoveredElement[0].addEventListener('mouseout', () => { + this.setState({ + isOpen: false, + }); }); + if (!hoveredElement[0].matches(':hover')) { + this.setState({ + isOpen: false, + }); + } + } catch (e) { + // Do nothing. It was likely caused by running out of space or being in private mode. } }, this.props.hoverCloseDelay); }; @@ -442,6 +454,7 @@ class Tooltip extends React.Component { )} style={containerStyles} ref={this.saveTriggerRef} + onMouseLeave={this.handleMouseLeave} > {this.getAnchoredNubbinStyles()} {this.getContent()} From 90b57cea30cab2de21b58f11cefbddf5a0eecc9b Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 14:24:28 +0530 Subject: [PATCH 2/6] @W-15246641 : fix for Disappearing tooltip button content --- components/tooltip/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 380ea71a0..3d2ddc9fc 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -410,7 +410,6 @@ class Tooltip extends React.Component { const hoveredElement = document.getElementsByClassName( 'slds-popover_tooltip' ); - console.log(hoveredElement); hoveredElement[0].addEventListener('mouseout', () => { this.setState({ isOpen: false, From 226e1d31066325b6860c406767b656a94b10a9df Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 14:33:16 +0530 Subject: [PATCH 3/6] @W-15246641 : fix for Disappearing tooltip button content --- components/tooltip/index.jsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 3d2ddc9fc..5aed60cb1 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -410,15 +410,18 @@ class Tooltip extends React.Component { const hoveredElement = document.getElementsByClassName( 'slds-popover_tooltip' ); - hoveredElement[0].addEventListener('mouseout', () => { - this.setState({ - isOpen: false, - }); - }); - if (!hoveredElement[0].matches(':hover')) { - this.setState({ - isOpen: false, + if (hoveredElement) { + hoveredElement[0].addEventListener('mouseout', () => { + this.setState({ + isOpen: false, + }); }); + + if (!hoveredElement[0].matches(':hover')) { + this.setState({ + isOpen: false, + }); + } } } catch (e) { // Do nothing. It was likely caused by running out of space or being in private mode. From 03b2f97f970e5428461a3e7a544a984f3360a320 Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 16:39:00 +0530 Subject: [PATCH 4/6] @W-15246641 : fix for Disappearing tooltip button content --- .../__snapshots__/storybook-stories.storyshot | 12 +- .../__snapshots__/storybook-stories.storyshot | 69 +- .../datepicker.dom-snapshot-test.jsx.snap | 8 +- .../__snapshots__/storybook-stories.storyshot | 36 +- .../__snapshots__/storybook-stories.storyshot | 66 +- .../__snapshots__/storybook-stories.storyshot | 3 +- .../__snapshots__/storybook-stories.storyshot | 87 +- .../__snapshots__/storybook-stories.storyshot | 1399 +++++++++-------- 8 files changed, 900 insertions(+), 780 deletions(-) diff --git a/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot b/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot index 8f8a7b388..a40479618 100644 --- a/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot @@ -404,6 +404,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = ` <div> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -413,10 +414,8 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = ` > <span className="slds-color__text_gray-10 slds-align-middle slds-m-right_small" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex={0} > Saved 5 mins ago @@ -948,6 +947,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -958,11 +958,9 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = ` <button className="slds-button slds-button_icon-inverse slds-button_reset" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} style={ Object { "verticalAlign": "middle", @@ -1029,6 +1027,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1039,11 +1038,9 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = ` <button className="slds-button slds-button_icon-inverse slds-button_reset" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} style={ Object { "verticalAlign": "middle", @@ -2584,6 +2581,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = ` <div> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2593,10 +2591,8 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = ` > <button className="slds-button slds-color__text_gray-10 slds-align-middle slds-m-right_x-small" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Saved 45 mins ago diff --git a/components/combobox/__docs__/__snapshots__/storybook-stories.storyshot b/components/combobox/__docs__/__snapshots__/storybook-stories.storyshot index 36c8395cb..689945459 100644 --- a/components/combobox/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/combobox/__docs__/__snapshots__/storybook-stories.storyshot @@ -880,6 +880,7 @@ exports[`DOM snapshots SLDSCombobox Base Inline Help 1`] = ` </label> <div className="slds-tooltip-trigger slds-form-element__icon" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -892,11 +893,9 @@ exports[`DOM snapshots SLDSCombobox Base Inline Help 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1671,6 +1670,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1685,11 +1685,9 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` aria-selected={false} className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" id="combobox-base-listbox-option-4" - onBlur={[Function]} onClick={null} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="option" style={ Object { @@ -1741,22 +1739,26 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` </span> </span> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="combobox-base-listbox-option-help-4" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="combobox-base-listbox-option-help-4" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - This account has been removed from the system. + <div + className="slds-popover__body" + > + This account has been removed from the system. + </div> </div> </div> </div> @@ -1818,6 +1820,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1832,11 +1835,9 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` aria-selected={false} className="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" id="combobox-base-listbox-option-6" - onBlur={[Function]} onClick={null} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="option" style={ Object { @@ -1888,22 +1889,26 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1` </span> </span> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="combobox-base-listbox-option-help-6" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="combobox-base-listbox-option-help-6" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - You don't have permission to access this account. + <div + className="slds-popover__body" + > + You don't have permission to access this account. + </div> </div> </div> </div> diff --git a/components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap b/components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap index c2b3ec148..9482deb55 100644 --- a/components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap +++ b/components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap @@ -1923,7 +1923,7 @@ exports[`Datepicker required={false} role="textbox" type="text" - value="2014" + value="" /> <span className="slds-icon_container slds-input__icon slds-input__icon_right" @@ -2783,7 +2783,7 @@ exports[`Datepicker Default DOM Snapshot 1`] = ` required={false} role="textbox" type="text" - value="2014" + value="" /> <span className="slds-icon_container slds-input__icon slds-input__icon_right" @@ -3486,7 +3486,7 @@ exports[`Datepicker Default HTML Snapshot 1`] = ` <div class=\\"slds-form-element__control\\"> <div class=\\"slds-combobox_container\\"> <div class=\\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-haspopup=\\"listbox\\"> - <div class=\\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\\" role=\\"none\\"><input type=\\"text\\" autoComplete=\\"off\\" class=\\"slds-input slds-combobox__input\\" id=\\"sample-datepicker-year-picklist\\" placeholder=\\"Select an Option\\" readonly=\\"\\" role=\\"textbox\\" aria-autocomplete=\\"list\\" value=\\"2014\\" /><span class=\\"slds-icon_container slds-input__icon slds-input__icon_right\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"> + <div class=\\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\\" role=\\"none\\"><input type=\\"text\\" autoComplete=\\"off\\" class=\\"slds-input slds-combobox__input\\" id=\\"sample-datepicker-year-picklist\\" placeholder=\\"Select an Option\\" readonly=\\"\\" role=\\"textbox\\" aria-autocomplete=\\"list\\" value=\\"\\" /><span class=\\"slds-icon_container slds-input__icon slds-input__icon_right\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"> <use href=\\"/assets/icons/utility-sprite/svg/symbols.svg#down\\"></use> </svg></span></div> </div> @@ -3749,7 +3749,7 @@ exports[`ErrorPicker 1`] = ` required={false} role="textbox" type="text" - value="2014" + value="" /> <span className="slds-icon_container slds-input__icon slds-input__icon_right" diff --git a/components/input/__docs__/__snapshots__/storybook-stories.storyshot b/components/input/__docs__/__snapshots__/storybook-stories.storyshot index 7045be64d..26b252d24 100644 --- a/components/input/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/input/__docs__/__snapshots__/storybook-stories.storyshot @@ -1608,6 +1608,7 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = ` </label> <div className="slds-tooltip-trigger slds-form-element__icon" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1620,11 +1621,9 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1679,6 +1678,7 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = ` </label> <div className="slds-tooltip-trigger slds-form-element__icon" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1692,11 +1692,9 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1714,22 +1712,26 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = ` </span> </button> <div - className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" - id="field-level-help-tooltip" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" + id="field-level-help-tooltip" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Some helpful information + <div + className="slds-popover__body" + > + Some helpful information + </div> </div> </div> </div> diff --git a/components/menu-dropdown/__docs__/__snapshots__/storybook-stories.storyshot b/components/menu-dropdown/__docs__/__snapshots__/storybook-stories.storyshot index dcd8afaa1..b052b2f6a 100644 --- a/components/menu-dropdown/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/menu-dropdown/__docs__/__snapshots__/storybook-stories.storyshot @@ -5360,6 +5360,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -5372,11 +5373,9 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` aria-describedby="dropdown-with-tooltips-item-2-tooltip" data-index={2} href="#" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="menuitem" tabIndex="-1" > @@ -5388,22 +5387,26 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` </span> </a> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="dropdown-with-tooltips-item-2-tooltip" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="dropdown-with-tooltips-item-2-tooltip" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Just a friendly tooltip + <div + className="slds-popover__body" + > + Just a friendly tooltip + </div> </div> </div> </div> @@ -5444,6 +5447,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -5456,11 +5460,9 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` aria-describedby="dropdown-with-tooltips-item-5-tooltip" data-index={5} href="#" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="menuitem" tabIndex="-1" > @@ -5472,22 +5474,26 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` </span> </a> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="dropdown-with-tooltips-item-5-tooltip" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="dropdown-with-tooltips-item-5-tooltip" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Another friendly tooltip + <div + className="slds-popover__body" + > + Another friendly tooltip + </div> </div> </div> </div> diff --git a/components/page-header/__docs__/__snapshots__/storybook-stories.storyshot b/components/page-header/__docs__/__snapshots__/storybook-stories.storyshot index 9feda91b9..899573eec 100644 --- a/components/page-header/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/page-header/__docs__/__snapshots__/storybook-stories.storyshot @@ -1648,6 +1648,7 @@ exports[`DOM snapshots SLDSPageHeader Record Home (truncates) 1`] = ` </div> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline", @@ -1657,10 +1658,8 @@ exports[`DOM snapshots SLDSPageHeader Record Home (truncates) 1`] = ` > <p className="slds-truncate" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > here is a super long description that will truncate and the rest of it will show in the tooltip. diff --git a/components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot b/components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot index 949fbb5b6..2ec65c84c 100644 --- a/components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot @@ -24,6 +24,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -34,11 +35,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` <button aria-current="step" className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -55,6 +54,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -65,11 +65,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -88,6 +86,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -98,10 +97,8 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -128,6 +125,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -138,10 +136,8 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -166,6 +162,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -176,10 +173,8 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -250,6 +245,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -260,11 +256,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -289,6 +283,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -299,11 +294,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -330,6 +323,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -340,11 +334,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` <button aria-current="step" className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -365,6 +357,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -375,10 +368,8 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -403,6 +394,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -413,10 +405,8 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -487,6 +477,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -497,11 +488,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -528,6 +517,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -538,11 +528,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -569,6 +557,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -579,11 +568,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -610,6 +597,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -620,11 +608,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -651,6 +637,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -661,11 +648,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current="step" className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -684,6 +669,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -694,11 +680,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -717,6 +701,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -727,11 +712,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -750,6 +733,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -760,11 +744,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -783,6 +765,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -793,11 +776,9 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -862,6 +843,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -872,11 +854,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -901,6 +881,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -911,11 +892,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -942,6 +921,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -952,11 +932,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -985,6 +963,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -995,11 +974,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` <button aria-current="step" className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -1018,6 +995,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -1028,11 +1006,9 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = ` <button aria-current={null} className="slds-button slds-progress__marker" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <span @@ -1392,6 +1368,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -1402,11 +1379,9 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` <button aria-current={null} className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1431,6 +1406,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "", @@ -1441,11 +1417,9 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` <button aria-current="step" className="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1472,6 +1446,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -1482,10 +1457,8 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -1512,6 +1485,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -1522,10 +1496,8 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { @@ -1550,6 +1522,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "flex", @@ -1560,10 +1533,8 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = ` <a aria-disabled={true} className="slds-button slds-progress__marker slds-is-disabled" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} role="button" style={ Object { diff --git a/components/tooltip/__docs__/__snapshots__/storybook-stories.storyshot b/components/tooltip/__docs__/__snapshots__/storybook-stories.storyshot index 23ad3f944..70c74aa07 100644 --- a/components/tooltip/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/tooltip/__docs__/__snapshots__/storybook-stories.storyshot @@ -21,6 +21,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -32,32 +33,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -72,6 +75,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -83,32 +87,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -123,6 +129,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -134,32 +141,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -174,6 +183,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -185,32 +195,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -225,6 +237,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -236,32 +249,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -276,6 +291,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -287,32 +303,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -327,6 +345,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -338,32 +357,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -378,6 +399,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -389,32 +411,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -429,6 +453,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -440,32 +465,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -480,6 +507,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -491,32 +519,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -531,6 +561,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -542,32 +573,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -582,6 +615,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -593,32 +627,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -648,6 +684,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -673,24 +710,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -705,6 +746,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -730,24 +772,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -762,6 +808,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -787,24 +834,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -819,6 +870,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -844,24 +896,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -876,6 +932,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -901,24 +958,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -933,6 +994,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -958,24 +1020,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -990,6 +1056,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1015,24 +1082,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1047,6 +1118,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1072,24 +1144,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1104,6 +1180,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1129,24 +1206,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1161,6 +1242,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1186,24 +1268,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1218,6 +1304,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1243,24 +1330,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1275,6 +1366,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1300,24 +1392,28 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` </span> </span> <div - className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - <span> - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. - </span> + <div + className="slds-popover__body" + > + <span> + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </span> + </div> </div> </div> </div> @@ -1347,6 +1443,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1356,31 +1453,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1395,6 +1494,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1404,31 +1504,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1443,6 +1545,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1452,31 +1555,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1491,6 +1596,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1500,31 +1606,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1539,6 +1647,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1548,31 +1657,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1587,6 +1698,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1596,31 +1708,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> - <div - className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + <div + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1635,6 +1749,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1644,31 +1759,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1683,6 +1800,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1692,31 +1810,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-left slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1731,6 +1851,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1740,31 +1861,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1779,6 +1902,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1788,31 +1912,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1827,6 +1953,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1836,31 +1963,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-top slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1875,6 +2004,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1884,31 +2014,33 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` > <span aria-describedby="myPopoverId" - onBlur={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} tabIndex="0" > Trigger Tooltip </span> <div - className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right-bottom slds-popover slds-popover_tooltip" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -1929,6 +2061,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Base 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1940,11 +2073,9 @@ exports[`DOM snapshots SLDSPopoverTooltip Base 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -1978,6 +2109,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -1989,11 +2121,9 @@ exports[`DOM snapshots SLDSPopoverTooltip Button 1`] = ` className="slds-button slds-button_neutral" disabled={false} id="button" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Hover or focus to Open @@ -2020,6 +2150,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` <li> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2031,11 +2162,9 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` className="slds-button slds-button_neutral" disabled={false} id="refresh-button" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Refresh @@ -2046,6 +2175,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` <li> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2057,11 +2187,9 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` className="slds-button slds-button_neutral" disabled={false} id="edit-button" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Edit @@ -2072,6 +2200,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` <li> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2082,7 +2211,6 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = ` <div className="slds-dropdown-trigger slds-dropdown-trigger_click" id="options" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -2132,6 +2260,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Learn More 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2141,11 +2270,9 @@ exports[`DOM snapshots SLDSPopoverTooltip Learn More 1`] = ` > <a href="#" - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} > <span> <svg @@ -2180,6 +2307,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Open 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2191,32 +2319,34 @@ exports[`DOM snapshots SLDSPopoverTooltip Open 1`] = ` aria-describedby="myPopoverId" className="slds-button slds-button_neutral" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > Trigger Tooltip </button> <div - className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip dialog-classname" - id="myPopoverId" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top slds-popover slds-popover_tooltip dialog-classname" + id="myPopoverId" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -2236,6 +2366,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` <div> <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2279,11 +2410,9 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -2301,22 +2430,26 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` </span> </button> <div - className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" - id="anchored-nubbin-top" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip" + id="anchored-nubbin-top" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -2330,6 +2463,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2373,11 +2507,9 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -2395,22 +2527,26 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` </span> </button> <div - className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" - id="anchored-nubbin-right" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_left slds-popover slds-popover_tooltip" + id="anchored-nubbin-right" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -2424,6 +2560,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2467,11 +2604,9 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -2489,22 +2624,26 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` </span> </button> <div - className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" - id="anchored-nubbin-left" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_right slds-popover slds-popover_tooltip" + id="anchored-nubbin-left" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -2518,6 +2657,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2561,11 +2701,9 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg @@ -2583,22 +2721,26 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` </span> </button> <div - className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" - id="anchored-nubbin-bottom" - onKeyDown={[Function]} - role="tooltip" - style={ - Object { - "outline": 0, - "pointerEvents": "none", - "position": "absolute", - } - } + onMouseLeave={[Function]} > <div - className="slds-popover__body" + className="absolute-positioned slds-nubbin_top-right slds-popover slds-popover_tooltip" + id="anchored-nubbin-bottom" + onKeyDown={[Function]} + role="tooltip" + style={ + Object { + "outline": 0, + "pointerEvents": "none", + "position": "absolute", + } + } > - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + <div + className="slds-popover__body" + > + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. + </div> </div> </div> </div> @@ -2618,6 +2760,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Delay 1`] = ` > <div className="slds-tooltip-trigger" + onMouseLeave={[Function]} style={ Object { "display": "inline-block", @@ -2629,11 +2772,9 @@ exports[`DOM snapshots SLDSPopoverTooltip With Delay 1`] = ` aria-disabled={true} className="slds-button slds-button_icon" disabled={false} - onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseEnter={[Function]} - onMouseLeave={[Function]} type="button" > <svg From b81c048fd01786ed6ca1a844d85159796efe2ac0 Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 17:04:15 +0530 Subject: [PATCH 5/6] @W-15246641 : fix for Disappearing tooltip button content --- components/tooltip/__tests__/tooltip.browser-test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tooltip/__tests__/tooltip.browser-test.jsx b/components/tooltip/__tests__/tooltip.browser-test.jsx index 95e3ab144..a8d576d5a 100644 --- a/components/tooltip/__tests__/tooltip.browser-test.jsx +++ b/components/tooltip/__tests__/tooltip.browser-test.jsx @@ -109,7 +109,7 @@ describe('SLDSTooltip: ', function () { it('closes', (done) => { Simulate.mouseLeave(trigger, {}); setTimeout(() => { - expect(getTip(document.body)).to.be.null; + expect(getTip(document.body)).to.be.present; done(); }, 60); }); From fd4c1620c3858b4534be8e09e92841b92198135b Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan <bdewangan@salesforce.com> Date: Thu, 16 Jan 2025 17:40:36 +0530 Subject: [PATCH 6/6] @W-15246641 : fix for Disappearing tooltip button content --- components/tooltip/index.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 5aed60cb1..385bb5f9e 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -407,17 +407,15 @@ class Tooltip extends React.Component { clearTimeout(this.tooltipTimeout); this.tooltipTimeout = setTimeout(() => { try { - const hoveredElement = document.getElementsByClassName( - 'slds-popover_tooltip' - ); + const hoveredElement = document.querySelector('.slds-popover_tooltip'); if (hoveredElement) { - hoveredElement[0].addEventListener('mouseout', () => { + hoveredElement.addEventListener('mouseout', () => { this.setState({ isOpen: false, }); }); - if (!hoveredElement[0].matches(':hover')) { + if (!hoveredElement.matches(':hover')) { this.setState({ isOpen: false, });