Popover Toggle

The Popover Toggle option is an advanced interface control that adds a toggle switch which, when activated, opens a popover panel containing additional, grouped settings. It functions as a Switcher but with the added purpose of revealing a hidden group of related controls.

Why would someone use it in a custom widget? #

Use this control to organize complex widgets and create cleaner, more intuitive settings panels. It’s perfect for hiding advanced, less-frequently-used options or for grouping a set of related sub-settings (like “Border Styles” or “Advanced Animation”) under a single master toggle, preventing the main panel from becoming cluttered.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab. A key part of its setup is defining the child controls inside the “Popover Fields” section.
• In the Elementor Editor: It appears as a toggle switch with a label. When the user switches it “On,” a popover window (a small floating panel) opens next to it, displaying the additional controls you defined.

Available Settings #

Here are the configurable settings for the Popover Toggle control:

Basic Settings #

• Label: The main name of the toggle control (e.g., “Advanced Settings”, “Custom Border”).
• Name: The unique machine-readable ID (like show_advanced) for the dynamic shortcode.
• Description: Optional text below the toggle.
• Label On / Label Off: The text displayed next to the toggle for its “On” and “Off” states (e.g., “Show”/”Hide”, “Custom”/”Default”).
• Popover Fields: This is the core feature. Here, you define the list of other controls (like Color, Number, Select) that will appear inside the popover when this toggle is activated.
• Default Value: Sets whether the toggle (and thus its popover) starts in the “On” (Yes) or “Off” (No) state.

Advanced Settings #

• Show Label, Label Block, Separator, Conditions, Control Classes: Standard options.
• Dynamic Support: Allows the toggle’s state to be controlled by a dynamic source.
• Frontend Available: If enabled, the toggle’s value (yes/no) is passed to your widget’s JavaScript, potentially allowing you to use it to trigger front-end logic related to the popover’s child controls.

4. Generated Shortcode #

When you add a Popover Toggle with the Name use_custom_border, Widget Builder generates the shortcode: {{use_custom_border}}.

• What it represents: This shortcode outputs the value of the toggle itself (typically yes if on, empty if off), just like a standard Switcher.
• Where to use it: You can use this shortcode in your HTML, CSS, or JS panels to conditionally apply styles or logic based on whether the advanced options are enabled.
  • The controls inside the popover (e.g., a {{border_color}} Color control you added to the Popover Fields) generate their own independent shortcodes, which you use as normal within your widget’s code.

5. How to Use It: A Practical Example #

Let’s create a “Fancy Box” widget where basic shadow is always available, but a custom, multi-property border is an advanced option.

1. In Widget Builder, add standard controls for Shadow Color and Shadow Blur.
2. Add a Popover Toggle control.
3. Set its Label to Custom Border. Set Label On to Custom and Label Off to Default.
4. Click into the Popover Fields section and add three new controls: a Color control for Border Color, a Number control for Border Width, and a Select control for Border Style (dashed, solid, etc.).
5. In your CSS panel, write logic that uses both the toggle and the nested controls:

.fancy-box {
    box-shadow: {{shadow_blur}}px {{shadow_color}};
    /* Conditionally apply border styles */
    {{use_custom_border}}
    border: {{border_width}}px {{border_style}} {{border_color}};
    {{/use_custom_border}}
}

In the editor, users will see a “Custom Border” toggle. Only if they switch it to “Custom” will a popover open, letting them set the detailed border properties.

6. Common Use Cases #

• Advanced Settings Panel: The classic use case—hiding powerful but complex options behind a “Show Advanced” toggle.
• Style Grouping: Grouping all properties of a design feature (e.g., “Background Overlay,” “Text Shadow”) under one master toggle.
• Conditional Feature Sets: Activating a whole set of controls for a specific feature (e.g., an “Add Icon” toggle that reveals icon library, size, and color controls in a popover).
• Creating Clean UI: Drastically simplifying the visual complexity of your widget’s settings panel for beginners, while keeping full power accessible.

7. Helpful Tips #

• Plan Your Groups: Think about which controls are logically related and would benefit from being grouped together in a popover.
• The Toggle is the Gatekeeper: The controls inside the popover are typically only functional (and their shortcodes only have a value) when the master toggle is ON. Design your CSS/JS logic accordingly.
• Clear “On/Off” Labels: Use action-oriented labels like “Add Icon,” “Customize Border,” or “Override Styles” to make the toggle’s purpose instantly clear.
• Start with “Off”: For advanced features, it’s often best to set the Default Value to “Off” (No) to keep the interface simple by default.

The Popover Toggle is an essential tool for designing professional, user-friendly widget interfaces that cater to both novice and advanced users by smartly organizing complexity.

Frequently Asked Questions #