By default, when you enable the variable picker tweak in Advanced Themer, the related icon will be visible on every input text available on the page:
But what if you’d like to see them only when hovering the control? Let’s see how to do that!
Set the builder mode to Custom
Bricks gives you the ability to add custom CSS inside the builder without affecting the frontend.
To do that, navigate to Bricks > Settings > Builder > Builder mode and choose Custom.
Save the settings and reload the page: you’ll now see a new textarea where you can add your custom CSS.
Add a custom CSS snippet to the builder
Paste the following CSS Snippet inside the textarea and save the settings again:
html .brxc-toggle-modal {
display: none;
}
html [data-control]:hover .brxc-toggle-modal {
display: flex;
}
Now the icon will be visible on hover only:
