bug(material/tooltip): tooltip inside sidenav hides after text update

[amanosacrous]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When the tooltip component overflows a parent sidenav and its text content is updated dynamically, it hides.

We have debugged the code, and this happens because the sidenav component extends the cdk-scrollable.

The piece of code that calls the tooltip hide function is the following:

components/src/material/tooltip/tooltip.ts

Lines 510 to 520 in bae9539

	strategy.positionChanges.pipe(takeUntil(this._destroyed)).subscribe(change => {
	this._updateCurrentPositionClass(change.connectionPair);
	if (this._tooltipInstance) {
	if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
	// After position changes occur and the overlay is clipped by
	// a parent scrollable then close the tooltip.
	this._ngZone.run(() => this.hide(0));
	}
	}
	});

Reproduction

Stackblitz url:
https://stackblitz.com/edit/stackblitz-starters-wbd1hh?file=src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.html

As you can see on the stackBlitz example, we have two tooltips:

• The tooltip inside the sidenav, which overflows the sidenav component. That if we update the tooltip text, the tooltip disappears. (BUG)
• On the other hand, we have the tooltip inside the mat-sidenav-content which works properly, and it doesn't hide after updating it. (WORKS WELL because doesn't overflow the parent)

Expected Behavior

The tooltip inside the sidenav should not hide when the text is updated.

Actual Behavior

The tooltip placed inside the sidnav that overflows is hidden suddenly when the text is updated.

Environment

• Angular: v16.2.4
• CDK/Material: v16.2.3
• Browser(s): Google chrome Versión 116.0.5845.187, Firefox 117.0
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[amysorto]

Having a tooltip within a sidenav doesn't seem like a common use case for most apps, it's unlikely this will be priortized in the near future. This issue can be reopened if that changes later.

[llorenspujol]

I don't believe we should close this issue that quickly, @amysorto. We put a lot of effort into providing this report. It includes a detailed description of the issue, a StackBlitz reproduction, and a link to the code that is causing the tooltip to hide.

If it won't be fixed, perhaps we could label it as 'wontfix' or something similar, rather than closing it. Closing the issue might give the impression that it's resolved, which it isn't. Providing a workaround would be enough. I'm sure that one of the core members familiar with the overlay/tooltip codebase can provide one.

Keeping the repository with less issues is good, I agree, but in this case it does not feel right. Tagging the issue with both 'bug' and 'wontfix' while keeping it opened would be better IMO.

[andrewseguin]

Thank you for the follow up and for sharing your thoughts! We appreciate the work you put in the issue and the reproduction. As we mentioned above, this is not a common use case, but we’ll reopen and add the “help wanted” label in case anyone from the community has the bandwidth to fix it.

[SoaringColinLaws]

Funny enough, we do use matToolTip in our nav as well, and I found this issue while trying to figure out why tool tips aren't working at all for us in Ng 15. We had some scss to temporarily fix the issue that existed in Ng 14, but it appears that tooltips are broken again. For what it's worth, I figured to just mention that yes, we also use tooltips in our navigation.

[czhang0405]

There is a warning in document page

Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.

Because the overlay (tooltip) clips out of its scrolling container (sidenav), it will be hidden by following those code.

components/src/material/tooltip/tooltip.ts

Lines 513 to 518 in bae9539

	if (this._tooltipInstance) {
	if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
	// After position changes occur and the overlay is clipped by
	// a parent scrollable then close the tooltip.
	this._ngZone.run(() => this.hide(0));
	}

Solutions:

• Solution 1: you need to make sure that tooltip should be in Scrollable content.

https://stackblitz.com/edit/stackblitz-starters-7zrzcu?file=src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.ts,src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.html,src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.css

• Solution 2: use runOutsideAngular

https://stackblitz.com/edit/stackblitz-starters-zqpb3p?file=src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.ts