Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: tooltip word break #18502

Conversation

riddhybansal
Copy link
Contributor

@riddhybansal riddhybansal commented Feb 3, 2025

Closes #18161
Adds word-break support for tooltip content to handle long text without spaces

Changelog

Changed

  • Added word-break: break-word to tooltip content styles to properly handle long text without spaces
  • Optimized SCSS structure for tooltip content styling

Testing / Reviewing

Steps to verify:
Go to Test story in tooltip word without space should not overflow , it should break.
Note- Test file will be deleted once the PR gets reviewed.

@riddhybansal riddhybansal requested a review from a team as a code owner February 3, 2025 13:44
Copy link

netlify bot commented Feb 3, 2025

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 63c83d0
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-web-components/deploys/67a723151c99a30008f3c3e6
😎 Deploy Preview https://deploy-preview-18502--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Feb 3, 2025

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 63c83d0
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/67a723155808a000082b95a7
😎 Deploy Preview https://deploy-preview-18502--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Feb 3, 2025

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 63c83d0
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/67a723159048490008f0a31b
😎 Deploy Preview https://deploy-preview-18502--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

codecov bot commented Feb 3, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.04%. Comparing base (bc04c97) to head (63c83d0).
Report is 14 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #18502      +/-   ##
==========================================
- Coverage   84.16%   84.04%   -0.12%     
==========================================
  Files         408      408              
  Lines       14450    14470      +20     
  Branches     4666     4680      +14     
==========================================
  Hits        12162    12162              
- Misses       2123     2141      +18     
- Partials      165      167       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@riddhybansal riddhybansal requested a review from kennylam February 3, 2025 14:18
Copy link
Contributor

@preetibansalui preetibansalui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

Copy link
Member

@kennylam kennylam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a note about removing the test story.

Comment on lines 92 to 107
export const Test = {
render: () => html`
<cds-tooltip align="bottom">
<button
class="sb-tooltip-trigger"
role="button"
aria-labelledby="content">
${Information16()}
</button>
<cds-tooltip-content id="content">
gfsghfsfsgggggghgsghsghgtuurutcxcrtstshgstsyststshsststststtstsffsfsgssjdstysyhgwtjyrkjgrutrwqtwyfyhygfhyiijfioyfdsrtkwjiutwjhqgwiyusrqjfterhtwgyqurtwu
</cds-tooltip-content>
</cds-tooltip>
`,
};

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this will be removed as mentioned in PR description.

Copy link
Member

@emyarod emyarod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me! I think we can remove the test story before merging

@riddhybansal riddhybansal added this pull request to the merge queue Feb 8, 2025
Merged via the queue into carbon-design-system:main with commit ca5f92f Feb 8, 2025
37 checks passed
@riddhybansal riddhybansal deleted the tooltip_issue_webcomponent branch February 8, 2025 12:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Tooltip issue with large text without spaces
4 participants