Home Forums Basel support forum Recreate Shop Menu and Display Attribute Tile under swatch Reply To: Recreate Shop Menu and Display Attribute Tile under swatch

#776

Artem Temos
Keymaster

Here is a code snippet that you need to add into your Custom CSS field in Theme Settings to show tooltips under swatches circles

.basel-swatch:before {
    display: block;
    opacity:0;
    visibility:hidden;
    border-radius:2px;
    position: absolute;
    top: -32px;
    left: 50%;
    background: #252525;
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-transform: capitalize;
    content: attr(data-value);
    padding: 3px 8px;
    transform: translateX(-50%);
    transition: all 0.2s ease-in-out;
}

.basel-swatch:hover:before {
    opacity:1;
    visibility:visible;
    top: -27px;
}