From 6acf41962cac55c0b40bed8623798af0118dd1d8 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 5 Nov 2025 08:47:23 +0200 Subject: [PATCH 1/4] fix(tooltip): update max-width handling for tooltips with nested content --- .../components/tooltip/_tooltip-theme.scss | 6 +++- .../tooltip/tooltip.directive.spec.ts | 35 +++++++++++++++++-- .../lib/test-utils/tooltip-components.spec.ts | 20 +++++++++++ 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 7d8d0705dad..851d412d320 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -23,7 +23,7 @@ gap: rem(8px); min-height: rem(24px); min-width: rem(24px); - max-width: 200px; + max-width: var(--igx-tooltip-max-width, 200px); width: fit-content; igx-icon { @@ -36,6 +36,10 @@ } } + .igx-tooltip:has(> :not([data-arrow]):not(igx-tooltip-close-button)) { + --igx-tooltip-max-width: none; + } + %arrow--top { border-left: $transparent-border; border-right: $transparent-border; diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts index e9f39d07c02..1cd84369e48 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts @@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core'; import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent } from '../../test-utils/tooltip-components.spec'; +import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent } from '../../test-utils/tooltip-components.spec'; import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api'; import { IgxTooltipDirective } from './tooltip.directive'; @@ -28,7 +28,8 @@ describe('IgxTooltip', () => { IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, - IgxTooltipWithCloseButtonComponent + IgxTooltipWithCloseButtonComponent, + IgxTooltipWithNestedContentComponent ] }).compileComponents(); UIInteractions.clearOverlay(); @@ -500,6 +501,36 @@ describe('IgxTooltip', () => { verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false); })); + + it('Should respect default max-width constraint for plain string tooltip', fakeAsync(() => { + hoverElement(button); + flush(); + + verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); + + const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth; + expect(maxWidth).toBe('200px'); + })); + }); + + describe('Custom content tooltip', () => { + beforeEach(waitForAsync(() => { + fix = TestBed.createComponent(IgxTooltipWithNestedContentComponent); + fix.detectChanges(); + button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective)); + tooltipTarget = fix.componentInstance.tooltipTarget; + tooltipNativeElement = fix.debugElement.query(By.directive(IgxTooltipDirective)).nativeElement; + })); + + it('Should not have max-width constraint for custom content tooltip', fakeAsync(() => { + hoverElement(button); + flush(); + + verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); + + const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth; + expect(maxWidth).toBe('none'); + })); }); describe('Multiple targets with single tooltip', () => { diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts index 89254e52c70..0f8e8cb4265 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts @@ -149,3 +149,23 @@ export class IgxTooltipWithCloseButtonComponent { @ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective; @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective; } + +@Component({ + template: ` + + +
+
+ Nested content +
+
+ `, + imports: [IgxTooltipDirective, IgxTooltipTargetDirective], + standalone: true +}) +export class IgxTooltipWithNestedContentComponent { + @ViewChild(IgxTooltipDirective, { static: true }) public tooltip!: IgxTooltipDirective; + @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget!: IgxTooltipTargetDirective; +} From 3f3bbd23d5c38da70fac5eaf457a48f864bfa5d9 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 5 Nov 2025 09:54:51 +0200 Subject: [PATCH 2/4] fix(tooltip): correct selector syntax for tooltip max-width handling --- .../src/lib/core/styles/components/tooltip/_tooltip-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 851d412d320..88e1b6f7b99 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -36,7 +36,7 @@ } } - .igx-tooltip:has(> :not([data-arrow]):not(igx-tooltip-close-button)) { + .igx-tooltip:has(> :not([data-arrow], igx-tooltip-close-button)) { --igx-tooltip-max-width: none; } From a96d368a931501c2f3994a5561b81c448d98a7fe Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 5 Nov 2025 11:44:17 +0200 Subject: [PATCH 3/4] refactor(tooltip): improve slotted content detection for styling purposes --- .../core/styles/components/tooltip/_tooltip-theme.scss | 8 ++++---- .../src/lib/directives/tooltip/tooltip.component.html | 2 +- .../src/lib/directives/tooltip/tooltip.directive.spec.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 88e1b6f7b99..1e7410a2109 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -23,7 +23,7 @@ gap: rem(8px); min-height: rem(24px); min-width: rem(24px); - max-width: var(--igx-tooltip-max-width, 200px); + max-width: rem(200px); width: fit-content; igx-icon { @@ -34,10 +34,10 @@ display: flex; cursor: default; } - } - .igx-tooltip:has(> :not([data-arrow], igx-tooltip-close-button)) { - --igx-tooltip-max-width: none; + &:not([data-default]) { + max-width: initial; + } } %arrow--top { diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.component.html b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.component.html index 4dd74656536..d1e984f1251 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.component.html +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.component.html @@ -1 +1 @@ -{{content}} \ No newline at end of file +{{content}} diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts index 1cd84369e48..871e427adc4 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts @@ -529,7 +529,7 @@ describe('IgxTooltip', () => { verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth; - expect(maxWidth).toBe('none'); + expect(maxWidth).toBe('initial'); })); }); From e823a433bc84eda29a5fe89fd79bccdacd7ae78d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 5 Nov 2025 11:52:29 +0200 Subject: [PATCH 4/4] spec(tooltip): revert from inital to none as its the computed style --- .../src/lib/directives/tooltip/tooltip.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts index 871e427adc4..1cd84369e48 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts @@ -529,7 +529,7 @@ describe('IgxTooltip', () => { verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true); const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth; - expect(maxWidth).toBe('initial'); + expect(maxWidth).toBe('none'); })); });