Add Control Popovers to Widgets

Control popovers are like any other controls, but they are displayed in a popover. When using popovers you can clean your panel by moving controls to popups and display them only when the user choose to see them.

The best example to understand popovers is to see how the typography control works. Typography has a toggle control, only if the user choose to change the default typography settings he will see the extra controls in a popover.

Control popovers are added by creating a new popover-toggle control and creating a new popover area using the start_popover() method and the end_popover() method. The controls in the popover will be displayed only if the toggle control was clicked.

Adding New Control Popovers

As mentioned above, new control popovers are added by creating a new Popover Toggle Control. Then we need to create a popover area using the wrapper start_popover() method:

$this->add_control(
	'popover-toggle',
	[
		'label' => __( 'Box', 'plugin-name' ),
		'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
		'label_off' => __( 'Default', 'your-plugin' ),
		'label_on' => __( 'Custom', 'your-plugin' ),
		'return_value' => 'yes',
	]
);

$this->start_popover();

Now that the popover area is opened, we can go on to adding more controls:

$this->add_control();

$this->add_control();

$this->add_control();

When all the controls are added, we have to close the popover area:

$this->end_popover();

Example Control Popovers

Full example:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style Section', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'popover-toggle',
			[
				'label' => __( 'Box', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
				'label_off' => __( 'Default', 'your-plugin' ),
				'label_on' => __( 'Custom', 'your-plugin' ),
				'return_value' => 'yes',
			]
		);

		$this->start_popover();

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_popover();

		$this->end_controls_section();

	}

}