How can I make the color name visible on product images?

[PrzemekRad]

Hello,

i have a question:

when i put cursor over colour selector, colour name is too long and its hides under product picture, how to setup it to be visable on picture?
I add screenshot to clarify my situation.

 

[Ihor-Sh · Accepted solution]

@PrzemekRad add this css part in code:

.globo-swatch-product-detail li label:hover .attr-title-hover {white-space: normal !important;}

[Ihor-Sh]

Hi @PrzemekRad can you share website url?

[PrzemekRad]

Why you need it? 

[Ihor-Sh]

In short - you need to add css style whitespace: wrap for this text. But if you want workable code snippet for your theme i need url to check classnames in dev console.

[Ihor-Sh · Accepted solution]

@PrzemekRad add this css part in code:

.globo-swatch-product-detail li label:hover .attr-title-hover {white-space: normal !important;}

[PrzemekRad]

Its a bit gliching when coursor left colour indicator, but works fine when its over it, so thanks 😉

[Ihor-Sh · Accepted solution]

remove :hover state from css like:

.globo-swatch-product-detail li label .attr-title-hover {white-space: normal !important;}

this should solve glitch

[PrzemekRad]

Nice, thats working prerfectly 😉 Thank you very much