Using the PopOver
When using the popover controller there is a small icon to reset. this is the original popover controller from Elementor documentation:
$this->add_control(
'popover-toggle',
[
'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
'label' => esc_html__( 'Box', 'textdomain' ),
'label_off' => esc_html__( 'Default', 'textdomain' ),
'label_on' => esc_html__( 'Custom', 'textdomain' ),
'return_value' => 'yes',
]
);
$this->start_popover();
$this->end_popover();
This is my version, where I add also a ‘no’ as a default, so it will start on an off position.
$this->add_control(
'ImageCss_popover_toggle',
[
'label' => esc_html__( 'Css FILTERS', 'textdomain' ),
'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
'label_off' => esc_html__( 'Default', 'textdomain' ),
'label_on' => esc_html__( 'Custom', 'textdomain' ),
'return_value' => 'yes',
'default' => 'no',
]
);
What i found missing in the documentation is the explenation how to use the reset option.
So far it works when I check if the popover-toggle returns a yes and do something accordingly
if('yes' == $settings['ImageCss_popover_toggle']){
$this->add_render_attribute('imageCss', 'style', 'position:absolute;');
}
else{
//reset the css by setting a filter to nothing
$this->add_render_attribute('imageCss', 'style', 'position:absolute; filter: blur(0px);');
}
In this case I am adding a custom css, in which if the return value from the popover is yes, then it will have no special value and the filter will come from somewhere else. Howevere if the return value is no (that will happen when I click the reset in the popover toggle window) then I am adding a css rule of an empty filter, which will over ride the values that come from within the popover controller.