Image Squares Preview

When you select Image Squares in the default Nop theme as the control type for product attributes,  the user gets a tooltip showing the name of the option (i.e. color name) and a larger image of the swatch. Is that possible in the Pavilion theme?

Greetings,

you can easily fix this issue by going to your theme administration > Themes > Pavilion > Settings and add the following code in the Custom Head Styles section:

.attributes dl {
overflow: visible;
}

.attributes dl:after {
  content: "";
  display: table;
  clear: both;
}

.attribute-squares.image-squares li {
position: relative;
}

.attribute-squares .tooltip-container {
position: absolute;
display: inline-block;
top: 100%;
left: 0;
opacity: 0;
z-index: 999;
transition: opacity .3s ease;
-webkit-transtion: opacity .3s ease;
pointer-events: none;
}

.tooltip-header {
margin: 5px 0;
font-size: 11px;
text-align: left;
}

.tooltip-body {
width: 100px;
height: 100px;
}

.tooltip-body img {
max-width: 100%;
max-height: 100%;
}

.attribute-squares.image-squares li:hover .tooltip-container {
opacity: 1;
}

Have a nice day.