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 overflow when displaying long title without space #1789

Merged
merged 1 commit into from
Feb 3, 2025

Conversation

AnhVu23
Copy link
Contributor

@AnhVu23 AnhVu23 commented Jan 8, 2025

What does this implement/fix?

When displaying long tooltip title without space, the text is overflow. More details and the bug reproduction are mentioned here: #1787.

PR aims to fix the issue by adding overflow-wrap: break-word to the <TooltipTitle /> component.

Does this close any currently open issues?

Issue link: #1787.

What do the changes look like?

Before After
Screenshot 2025-01-08 at 13 04 00 Screenshot 2025-01-08 at 13 03 33

Storybook link

I created a new storybook for this case, but I do not know how to add remote url. Here is the local url: http://localhost:6006/?path=/story/polaris-viz-subcomponents-tooltipcontent--long-title-without-space

Before merging

  • Check your changes on a variety of browsers and devices.

  • Update the Changelog's Unreleased section with your changes.

  • Update relevant documentation, tests, and Storybook.

  • Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

@AnhVu23 AnhVu23 force-pushed the fix-tooltip-overflow branch from d0bfc3a to 6d25507 Compare January 31, 2025 08:41
@AnhVu23 AnhVu23 requested a review from envex February 3, 2025 08:45
@envex envex merged commit 7a02eb8 into Shopify:main Feb 3, 2025
2 checks passed
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.

2 participants