The name of the color that pops Up when I hover to the product color is going to the next line

Shopify Discussion

Topic summary

A user is experiencing a layout issue where product color names display on multiple lines when hovering over color swatches.

Proposed Solution:
Another user suggested adding CSS code to the theme’s stylesheet targeting the color swatch tooltip element. The CSS would:

  • Set text-wrap: nowrap to prevent line breaks
  • Set width: fit-content to adjust width automatically

Status:
The original poster acknowledged the suggestion and plans to implement the CSS fix soon. The issue remains unresolved pending testing of this solution.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Screen Shot 2024-02-14 at 2.36.24 PM.png
Screen Shot 2024-02-14 at 2.36.24 PM.png190×124 2.02 KB

2

Try adding the following CSS to your theme’s css file

.form-field-swatch .tooltip {
    text-wrap: nowrap;
    width: fit-content;
}
3

Thank you for responding. I will try this soon. I appreciate this.