Fix tooltip max-width constraint for custom content

[Copilot]

Fix igc-tooltip max-width for custom content

Problem

When placing custom content inside the tooltip, the component does not automatically unset the max-width: 200px style that is applied by default for simple text tooltips. As a result, tooltips with custom content are incorrectly constrained in width.

Solution Implemented

• Understand the current implementation and issue
• Implement dynamic detection of custom content vs simple text
• Modify CSS to conditionally apply max-width only for simple text tooltips
• Add tests to verify the fix
• Verify linting passes (biome, prettier, stylelint)
• Verify type checking passes
• Address code review feedback
• Fix timing issue with slot detection
• Run and pass all tests

Recent Fix

Fixed a timing issue where the slot content check was happening too early in the lifecycle. The @query() decorator only populates properties after firstUpdated() completes, so calling _checkForCustomContent() in firstUpdated() meant the _defaultSlot was not yet available.

Moved the check to updated() lifecycle method with a flag to ensure it runs on the first update (when the slot is available) and whenever the message property changes.

Technical Changes

1. TypeScript Component (tooltip.ts)

• Added @state() property _hasCustomContent to track if custom content is slotted
• Added @query() for the default slot to detect slotted content
• Added _initialCheckDone flag to track if initial check has been performed
• Implemented _checkForCustomContent() method with defensive null check and early return
• Used classMap directive to conditionally apply simple-text class based on _hasCustomContent
• Added @slotchange event listener directly bound to _checkForCustomContent()
• Implemented updated() lifecycle to check for custom content after slot is available

2. CSS (tooltip.base.scss)

• Moved max-width: 200px from [part="base"] to [part="base"].simple-text
• Custom content tooltips are now unconstrained and can expand to fit their content

3. Tests (tooltip.spec.ts)

• Added test: "should apply simple-text class when using message property only"
• Added test: "should not apply simple-text class when using custom content"

Backward Compatibility

✅ Fully backward compatible

• Existing tooltips using the message property will continue to have the 200px max-width constraint
• Existing custom tooltips with manual CSS overrides (like in stories) will continue to work
• Only tooltips with custom slotted content (and no manual override) will benefit from the automatic unconstrained width

Original prompt

---

This section details on the original issue you should resolve

<issue_title>igc-tooltip's max-width remains 200px when using custom content</issue_title>
<issue_description>### Which component(s) are affected?

Tooltip

Description

When placing custom content inside the tooltip, the component does not automatically unset the max-width: 200px style that is applied by default for simple text tooltips.
As a result, tooltips with custom content are incorrectly constrained in width.

Reproduction

1. Create an element that will serve as the tooltip trigger (e.g., with an id="basic-tooltip").

2. Create an element and anchor it to the button using the target property (or allow implicit association if rendered next to it).

3. Inside the , include custom HTML content (e.g., a nested

   , an image, or another component).

<div style="margin: 10dvh 5dvw">
 <igc-button id="basic-tooltip">Hover over me</igc-button>
</div>

<igc-tooltip target="basic-tooltip">
 Hello from the tooltip!
 <div>
   Custom Custom
 </div>
</igc-tooltip> 

4. Hover over the button to show the tooltip.

5. Inspect the tooltip container in DevTools

Workaround

The workaround is to overwrite the max-width style. This is how we have done it in the samples of the tooltip here.

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

Any

Browser/OS/Node environment

Browser: any
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes igc-tooltip's max-width remains 200px when using custom content #1925

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[kdinev]

@copilot There's a failing test

[Copilot]

@copilot There's a failing test

Fixed in commit 530a7a8. The issue was a timing problem - the slot content check was happening too early in the lifecycle before the @query() decorated _defaultSlot property was populated. Moved the check to the updated() lifecycle method to ensure the slot element is available when we check for custom content.

[rkaraivanov]

@copilot

1. Use parts instead of classes for scoping the default content styles.
2. Use the partMap directive from the package to bind parts based on the presence of slotted content.
3. Use the slot controller from the package to query for assigned nodes. It also covers automatic re-rendering when a slotchange event is fired.

[Copilot]

Pull Request Overview

This PR introduces a conditional CSS part (simple-text) to the tooltip component that allows styling differentiation between tooltips using the message property versus those with custom slotted content. The simple-text part is only applied when the tooltip displays text via the message property, and this allows moving the max-width constraint from the base container to only simple text tooltips.

• Added simple-text CSS part that is conditionally applied based on slot usage
• Integrated slot controller to detect whether custom content is slotted
• Moved max-width styling from base part to simple-text part for better flexibility with custom content

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/components/tooltip/tooltip.ts	Added slot controller, partMap utility, and conditional simple-text part logic to the render method
src/components/tooltip/tooltip.spec.ts	Added tests verifying the simple-text part is applied correctly based on content type
src/components/tooltip/themes/tooltip.base.scss	Updated CSS selectors to use part tokens (~=) and moved max-width to simple-text part only

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.