Fix tooltip max-width constraint for custom content

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>

Author: Copilot

src/components/tooltip/themes/tooltip.base.scss

@@ -16,11 +16,14 @@
     font-weight: 600;
     line-height: rem(16px);
     text-align: start;
-    max-width: 200px;
     display: flex;
     align-items: flex-start;
     gap: rem(8px);
     position: relative;
+
+    &.simple-text {
+        max-width: 200px;
+    }
 }
 
 #arrow {

src/components/tooltip/tooltip.spec.ts

@@ -276,6 +276,40 @@ describe('Tooltip', () => {
       expect(defaultSlot?.assignedElements()[0].matches('button')).to.be.true;
     });
 
+    it('should apply simple-text class when using message property only', async () => {
+      const template = html`
+        <div>
+          <button>Hover</button>
+          <igc-tooltip message="Simple text tooltip"></igc-tooltip>
+        </div>
+      `;
+      const container = await fixture(template);
+      tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
+      await elementUpdated(tooltip);
+
+      const baseElement = tooltip.renderRoot.querySelector('[part="base"]');
+      expect(baseElement).not.to.be.null;
+      expect(baseElement?.classList.contains('simple-text')).to.be.true;
+    });
+
+    it('should not apply simple-text class when using custom content', async () => {
+      const template = html`
+        <div>
+          <button>Hover</button>
+          <igc-tooltip>
+            <div>Custom content with complex structure</div>
+          </igc-tooltip>
+        </div>
+      `;
+      const container = await fixture(template);
+      tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
+      await elementUpdated(tooltip);
+
+      const baseElement = tooltip.renderRoot.querySelector('[part="base"]');
+      expect(baseElement).not.to.be.null;
+      expect(baseElement?.classList.contains('simple-text')).to.be.false;
+    });
+
     it('should render a default close button when in `sticky` mode', async () => {
       tooltip.sticky = true;
       await elementUpdated(tooltip);

src/components/tooltip/tooltip.ts

@@ -1,5 +1,6 @@
 import { html, LitElement, nothing, type PropertyValues } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { EaseOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
@@ -101,6 +102,12 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   @query('#arrow')
   private _arrowElement!: HTMLElement;
 
+  @query('slot:not([name])')
+  private _defaultSlot!: HTMLSlotElement;
+
+  @state()
+  private _hasCustomContent = false;
+
   private get _arrowOffset() {
     if (this.placement.includes('-')) {
       // Horizontal start | end placement
@@ -291,6 +298,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         this.requestUpdate();
       });
     }
+    this._checkForCustomContent();
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -429,7 +437,23 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     this._emitEvent('igcClosed');
   }
 
+  private _checkForCustomContent(): void {
+    if (this._defaultSlot) {
+      const assignedNodes = this._defaultSlot.assignedNodes({ flatten: true });
+      // If there are assigned nodes, we have custom content
+      this._hasCustomContent = assignedNodes.length > 0;
+    }
+  }
+
+  private _handleSlotChange(): void {
+    this._checkForCustomContent();
+  }
+
   protected override render() {
+    const classes = {
+      'simple-text': !this._hasCustomContent,
+    };
+
     return html`
       <igc-popover
         .inert=${!this.open}
@@ -443,8 +467,8 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         flip
         shift
       >
-        <div ${ref(this._containerRef)} part="base">
-          <slot>${this.message}</slot>
+        <div ${ref(this._containerRef)} part="base" class=${classMap(classes)}>
+          <slot @slotchange=${this._handleSlotChange}>${this.message}</slot>
           ${this.sticky
             ? html`
                 <slot name="close-button" @click=${this._setAutoHide}>