fix(tooltip/snackbar): use overlay service size helpers - master #16837

RivaIvanova · 2026-01-30T15:18:16Z

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them

wnvko

So we know this PR is breaking the tooltip. What is the reason this happening? Can we revert the change that made this happen?
Adding this additional property to the overlay settings and use it in this way in the tooltip looks like a breaking change. IMO it will be better to find out what happened in the above mentioned PR and to revert it.

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

projects/igniteui-angular/core/src/services/overlay/overlay.ts

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts

…UI/igniteui-angular into rivanova/fix-16458-master

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts

Copilot · 2026-02-09T14:38:16Z

projects/igniteui-angular/core/src/services/overlay/overlay.ts

+    /**
+     * Measures the element's initial size and controls *when* the element is moved into the overlay outlet.
+     *
+     * The elements inherit constraining parent styles, so
+     * for some of them (e.g., Tooltip, Snackbar) their pre-move size is incorrect.
+     * Those can **override** this method to measure **after** moving to get an accurate size.
+     *
+     * - **Default**: Measures in-place (current parent), then moves to the overlay.
+     *
+     * @param info OverlayInfo for the content being attached.
+     * @param moveToOverlay Moves the element into the overlay.
+     */
+    private setInitialSize(info: OverlayInfo, moveToOverlay: () => void): void {


The doc/comment claims consumers can “override this method”, but setInitialSize is private, so it can’t be overridden. The actual extension mechanism is OverlaySizeRegistry.register(...). Reword the comment to reflect the registry-based override (e.g., “Components can register an override via OverlaySizeRegistry to measure after moving”).

Copilot · 2026-02-09T14:38:17Z

projects/igniteui-angular/core/src/services/public_api.ts

    AbsolutePosition, ConnectedFit, HorizontalAlignment, OffsetMode, OverlayAnimationEventArgs, OverlayCancelableEventArgs, OverlayClosingEventArgs,
    OverlayCreateSettings, OverlayEventArgs, OverlaySettings, Point, PositionSettings, RelativePosition, RelativePositionStrategy, Size, VerticalAlignment, Util,
-    IgxOverlayOutletDirective
+    IgxOverlayOutletDirective, OverlayInfo, OverlaySizeRegistry


OverlaySizeRegistry is introduced in utilities.ts with @hidden @internal JSDoc, but it’s now re-exported from the core public API. This is inconsistent and may unintentionally expose an internal hook to library consumers. Either (1) keep it public and remove/adjust the @internal marker + add minimal API docs, or (2) avoid re-exporting it from the public entrypoint and instead consume it via an internal/shared entrypoint intended for cross-package internals.

Suggested change

IgxOverlayOutletDirective, OverlayInfo, OverlaySizeRegistry

IgxOverlayOutletDirective, OverlayInfo

projects/igniteui-angular/test-utils/tooltip-components.spec.ts

RivaIvanova · 2026-02-09T15:32:30Z

@wnvko The linked PR does not break the tooltip. This PR was merged in version 20.1.0, but the behavior is observed in version 15.0.x too (maybe even before that, but I tested with that version).

The PR adds a lot of changes, but the one that is related to the current behavior is adding this CSS:

min-width: rem(24px);
max-width: rem(200px);
width: fit-content;

The new styles did not break the tooltip, but revealed the already broken behavior.

Overall, it is due to the element's size (width) being measured before being moved to the overlay content. If the element does not have a specific width set, like 100px, its size is affected by the styles that come from the parent container.

For example, consider this template:

<div style="background: red; text-transform: uppercase; letter-spacing: 8px;" [igxTooltipTarget]="themeTooltipRef4">
    Parent Element
    <div #themeTooltipRef4="tooltip" igxTooltip>Click to toggle between dark/light themes</div>
</div>

The parent element (red div) has these styles text-transform: uppercase; letter-spacing: 8px; and I would expect the igx-overlay__content to look somewhat like in the image, with a width of 194.99px (the size of the tooltip).

However, the result is the following:

That's because the tooltip/element is measured and then moved to the overlay. While being measured, the tooltip is affected by the styles of the parent, and a bigger size is set as the initialSize.width.

The snackbar behavior is due to this PR. Not exactly breaking it, since before this PR, the snackbar had no size (perhaps because it was not present in the view yet)

And the igx-overlay__content had no styles at all, e.g., style="width: 200px".

I removed the additional property from the overlay settings and implemented a different approach, but similar to the previous one, it requires moving the element to the overlay and then getting its size.

fix(overlay): conditionally cache element size

a77b3aa

RivaIvanova added overlay snackbar tooltip version: 21.1.x labels Jan 30, 2026

RivaIvanova requested a review from Copilot January 30, 2026 15:18

This comment was marked as outdated.

Sign in to view

chore(*): update api docs; add typing

ad17735

RivaIvanova added the ❌ status: awaiting-test PRs awaiting manual verification label Jan 30, 2026

RivaIvanova changed the title ~~fix(overlay): conditionally cache element size~~ fix(overlay): conditionally cache element size - master Jan 30, 2026

RivaIvanova requested a review from wnvko January 30, 2026 16:33

Merge branch 'master' into rivanova/fix-16458-master

a1a58a7

wnvko requested changes Feb 3, 2026

View reviewed changes

RivaIvanova added 🛠️ status: in-development Issues and PRs with active development on them and removed ❌ status: awaiting-test PRs awaiting manual verification labels Feb 4, 2026

wnvko mentioned this pull request Feb 4, 2026

fix(overlay): conditionally cache element size - 20.1.x #16840

Open

14 tasks

RivaIvanova and others added 3 commits February 5, 2026 13:46

Merge branch 'master' into rivanova/fix-16458-master

c0a0ed3

fix(tooltip/snackbar): use overlay service size helpers

6e78973

Merge branch 'master' into rivanova/fix-16458-master

2d5a230

RivaIvanova changed the title ~~fix(overlay): conditionally cache element size - master~~ fix(tooltip/snackbar): use overlay service size helpers - master Feb 6, 2026

RivaIvanova requested a review from Copilot February 6, 2026 14:26

Copilot AI reviewed Feb 6, 2026

View reviewed changes

projects/igniteui-angular/core/src/services/overlay/overlay.ts Outdated Show resolved Hide resolved

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts Outdated Show resolved Hide resolved

RivaIvanova added 4 commits February 6, 2026 16:52

fix(tooltip/snackbar): add proper OverlayInfo import

d4b5b2e

Merge branch 'rivanova/fix-16458-master' of https://github.com/Ignite…

0c5262c

…UI/igniteui-angular into rivanova/fix-16458-master

test(snackbar): extract content width

1ad87d4

fix(tooltip/snackbar): use add overlay size registry

203e016

RivaIvanova requested a review from Copilot February 9, 2026 14:36

Copilot AI reviewed Feb 9, 2026

View reviewed changes

test(tooltip): remove standalone prop

62cce1f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tooltip/snackbar): use overlay service size helpers - master #16837

fix(tooltip/snackbar): use overlay service size helpers - master #16837

RivaIvanova commented Jan 30, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

wnvko left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Copilot AI Feb 9, 2026

Uh oh!

Uh oh!

RivaIvanova commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	IgxOverlayOutletDirective, OverlayInfo, OverlaySizeRegistry
	IgxOverlayOutletDirective, OverlayInfo

fix(tooltip/snackbar): use overlay service size helpers - master #16837

Are you sure you want to change the base?

fix(tooltip/snackbar): use overlay service size helpers - master #16837

Conversation

RivaIvanova commented Jan 30, 2026

Additional information (check all that apply):

Checklist:

Uh oh!

This comment was marked as outdated.

Uh oh!

wnvko left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

RivaIvanova commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants