diff --git a/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot b/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot index 8f8a7b3884..a40479618c 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 dcd8afaa17..b052b2f6a7 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 9feda91b95..899573eec7 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 949fbb5b61..2ec65c84cf 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`] = ` >
    { Simulate.mouseLeave(trigger, {}); setTimeout(() => { - expect(getTip(document.body)).to.be.null; + expect(getTip(document.body)).to.be.present; done(); }, 60); }); diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index db4361566b..385bb5f9e5 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.querySelector('.slds-popover_tooltip'); + if (hoveredElement) { + hoveredElement.addEventListener('mouseout', () => { + this.setState({ + isOpen: false, + }); + }); + + if (!hoveredElement.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()}