The Popover Toggle field is a switch that opens a small popover of child controls when turned on. Elementor uses the same pattern for its own optional feature clusters, and inside the Master Addons Widget Builder it does the same job for your custom widgets: a set of related settings stays hidden behind one toggle instead of crowding the panel with a whole extra section.
The Popover Toggle supports Conditions like every control, and each field inside the popover gets its own combined token, {{ toggle_field }}, rendered by the Twig-syntax template engine. Both guides cover setup and limitations.
Unlike a plain value field, the Popover Toggle is structural. It holds the on/off state itself, and it carries child fields whose values reach your template under composed names. Both halves of that model are covered below with a working overlay example.
What the Popover Toggle field does #
- Renders a toggle in the widget’s panel with your on and off labels.
- Opens a popover of child controls when switched on, defined in the field’s popover fields list.
- Accepts most value field types as children, such as color, text, select, and slider fields.
- Exposes the toggle state to your template as a truthy value when on and an empty string when off.
- Exposes each child value under a composed name that joins the parent and child names with an underscore.
If widget building is new territory, read the Widget Builder overview first.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- A custom widget open in the Widget Builder editor. Our example is an image banner widget with an optional color overlay: one toggle named
overlay, one color child namedcolor.
How to add a Popover Toggle field #
In the Widget Builder editor, scroll the fields panel on the left until you find the Popover Toggle field, listed with the other structural fields such as Tabs and Repeater.
Drag it into a section under the Content or Style tab, wherever the optional settings belong. Once it lands, the field’s options open on the left, and the main work is defining the child fields the popover will hold.
Popover Toggle field options explained #
- Label: the text next to the toggle in Elementor, for example “Overlay”.
- Name: the unique identifier for the toggle, letters, numbers, and underscores only, for example
overlay. Child names build on it, so keep it short. - Label On / Label Off: the two states shown on the switch, such as “Yes” and “No”.
- Return Value: the value stored while the toggle is on, “yes” by default. Off stores an empty string.
- Popover Fields: the child controls inside the popover. Most value field types are allowed; our example holds a single color field named
color. - Description, Show Label, Separator, and Conditions cover the usual display options.
Read the toggle and its children in your template #
Two naming rules cover everything this field produces.
The toggle itself is available under its own name. It prints the return value when on and an empty string when off, which makes it a natural condition:
{% if overlay %} ... {% endif %}Note that the stored value is the Return Value string, “yes” by default, not a boolean. Test truthiness the way the example does; comparing the field against true never matches.
Each child is available as the parent name and child name joined with an underscore. The color child of the overlay popover becomes overlay_color. Put together, the banner’s overlay layer looks like this in the HTML panel:
<div class="banner-media">
<img src="{{ banner_image }}" alt="">
{% if overlay %}
<div class="banner-overlay" style="background: {{ overlay_color }}"></div>
{% endif %}
</div>Toggle off, no overlay div renders at all. Toggle on, the div appears with whatever color the editor picked. Add more children and each follows the same pattern: a child named opacity would read as {{ overlay_opacity }}.
Watch out: there is no dot notation here. {{ overlay.color }} resolves to nothing, because children are flattened to underscore-joined names, not nested under the parent. If a child value comes out empty, check the composed name first.
Use the Popover Toggle in Elementor #
Add the widget to a page in Elementor, or reload the editor if the page was already open. The control appears as a labeled switch.
Flip it on and the popover opens with the child controls. In the banner example, the editor picks an overlay color, the layer fades in over the image in the preview, and switching the toggle off removes it again without losing the chosen color.
Common use cases #
- Image and video overlays, with color and opacity children behind one switch.
- Optional badges on cards, where the toggle shows the badge and children set its text and style.
- Hover effect settings that only matter when the effect is enabled.
- Countdown or schedule options on banners that are sometimes time-limited.
- Secondary buttons, keeping the second button’s text, link, and style out of sight until needed.
Tips for working with the Popover Toggle field #
- Wrap dependent markup in
{% if parent %}. The toggle’s whole point is that the children only matter when it is on; the template should reflect that. - Compose child names with an underscore. Parent
overlayplus childcoloris{{ overlay_color }}, never{{ overlay.color }}. - Keep parent names short. Every child token repeats the parent name, and
{{ overlay_color }}reads better than{{ banner_image_overlay_settings_color }}. - Use it for genuinely optional clusters. Settings the widget always needs belong in the open panel; the popover is for the sometimes features.
- Give children sensible defaults. The moment the toggle flips on, the feature should look intentional rather than unstyled.
Frequently Asked Questions #
What is the Popover Toggle field in the Master Addons Widget Builder?
It is a structural field: a switch that opens a popover of child controls when turned on. The toggle’s state reaches your template under the field’s name, and each child value arrives under the parent and child names joined with an underscore, such as {{ overlay_color }}.
How do I check whether the toggle is on?
Use it directly in a condition: {% if overlay %}. While on, the field holds its return value, “yes” by default; while off, it holds an empty string, which counts as false.
How do I print a child field’s value?
Join the parent and child names with an underscore. A popover named overlay with a child named color prints as {{ overlay_color }}. Dot notation like {{ overlay.color }} does not resolve for popover children.
Which field types can go inside the popover?
Most value field types work as children, including color, text, select, and slider fields. Each child keeps its own type’s value shape, so a slider child still needs its size and unit read the usual way.
Do child values survive toggling off?
Yes. Switching the toggle off hides the popover and makes the parent condition false, but the children keep their values, and everything returns when the toggle comes back on.
When should I use a Popover Toggle instead of a Switcher?
Use a plain Switcher when one on/off flag is all you need. Reach for the Popover Toggle when the flag brings settings with it; the children live inside the popover instead of cluttering the panel behind a separate switcher and conditions.
Wrapping up #
The Widget Builder Popover Toggle field keeps a widget’s panel honest: the everyday controls stay visible, and the optional cluster waits behind a switch. Wire it with {% if parent %} around the markup and underscore-joined tokens for the children, and the feature switches cleanly on and off. For the other structural patterns, see the Repeater field, which handles lists the same way this field handles options. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.
