Fix max-width handling for tooltips with nested content - master (#16423)

* fix(tooltip): update max-width handling for tooltips with nested content

* fix(tooltip): correct selector syntax for tooltip max-width handling

* refactor(tooltip): improve slotted content detection for styling purposes

* spec(tooltip): revert from inital to none as its the computed style

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: Zneeky

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: rem(200px);
         width: fit-content;
 
         igx-icon {
@@ -34,6 +34,10 @@
             display: flex;
             cursor: default;
         }
+
+        &:not([data-default]) {
+            max-width: initial;
+        }
     }
 
     %arrow--top {

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.component.html

@@ -1 +1 @@
-<span igxTooltip>{{content}}</span>
+<span data-default igxTooltip>{{content}}</span>

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', () => {

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: `
+    <button class="btn" [igxTooltipTarget]="tooltipRef">
+      Hover me
+    </button>
+
+    <div igxTooltip #tooltipRef="tooltip">
+      <div class="nested" style="background: red; width: 400px; color: white; padding: 4px;">
+        <span>Nested content</span>
+      </div>
+    </div>
+    `,
+    imports: [IgxTooltipDirective, IgxTooltipTargetDirective],
+    standalone: true
+})
+export class IgxTooltipWithNestedContentComponent {
+    @ViewChild(IgxTooltipDirective, { static: true }) public tooltip!: IgxTooltipDirective;
+    @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget!: IgxTooltipTargetDirective;
+}