From f22fca31b232efbcd0bfe2eba3573ada7cf76fff Mon Sep 17 00:00:00 2001 From: Bhupendra Dewangan 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 ? ( - this.getTooltipTarget()} - position={this.props.position} - variant="tooltip" - containerProps={{ - id: this.getId(), - }} - > - {this.getTooltipContent()} - +
+ this.getTooltipTarget()} + position={this.props.position} + variant="tooltip" + containerProps={{ + id: this.getId(), + }} + > + {this.getTooltipContent()} + +
) : ( ); @@ -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 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 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 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`] = `
Saved 5 mins ago @@ -948,6 +947,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = ` >
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`] = ` >
@@ -5388,22 +5387,26 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
@@ -5444,6 +5447,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = ` >
@@ -5472,22 +5474,26 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
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`] = `

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`] = ` >

Trigger Tooltip
@@ -72,6 +75,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -123,6 +129,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -174,6 +183,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -225,6 +237,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -276,6 +291,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -327,6 +345,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -378,6 +399,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -429,6 +453,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -480,6 +507,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -531,6 +561,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -582,6 +615,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (Button) 1`] = ` >
Trigger Tooltip
@@ -648,6 +684,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -705,6 +746,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -762,6 +808,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -819,6 +870,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -876,6 +932,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -933,6 +994,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -990,6 +1056,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1047,6 +1118,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1104,6 +1180,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1161,6 +1242,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1218,6 +1304,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1275,6 +1366,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (icon) 1`] = ` >
@@ -1347,6 +1443,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1395,6 +1494,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1443,6 +1545,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1491,6 +1596,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1539,6 +1647,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1587,6 +1698,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip -
@@ -1635,6 +1749,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1683,6 +1800,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1731,6 +1851,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1779,6 +1902,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1827,6 +1953,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1875,6 +2004,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Alignment (span) 1`] = ` >
Trigger Tooltip
@@ -1929,6 +2061,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Base 1`] = ` >
Hover or focus to Open @@ -2020,6 +2150,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = `
  • Refresh @@ -2046,6 +2175,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = `
  • Edit @@ -2072,6 +2200,7 @@ exports[`DOM snapshots SLDSPopoverTooltip Button Group 1`] = `
  • Trigger Tooltip
    @@ -2236,6 +2366,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = `
    @@ -2330,6 +2463,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` >
    @@ -2424,6 +2560,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` >
    @@ -2518,6 +2657,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Anchored Nubbin 1`] = ` >
    @@ -2618,6 +2760,7 @@ exports[`DOM snapshots SLDSPopoverTooltip With Delay 1`] = ` >
    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 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, });