CSS Snippets

Below some useful snippets to create features that in Webflow are still not very easy to do and do require pseudo elements

Variant Buttons Tooltips

When you use Variant Buttons swatches, sometimes is usefull to show up the buttons without any title (only image or color for example).

By adding the snippet below you will get a pseudo element that will appear on hover and dinamically show up the title of the option, feel free to modify the style below according to your own style!

<style>
variant-swatches button {
        position: relative;
}

variant-swatches button:hover::before {
    content: attr(data-value);
    position:absolute;
    top: -70%;
    left: 50%;
    z-index: 9999;
    padding: 0.2rem 0.5rem;
    transform: translateX(-50%);
    height: auto;
    border-radius: 0.3rem;
    background-color: black;
    color: white;
    font-size: 0.8rem;
}
</style>