add_common_sections( $element, $args ); }, 10, 2 ); } /** * Add Controls * * @since 1.8.0 * * @access private */ private function add_controls( $element, $args ) { $element_type = $element->get_type(); $element->add_control( 'tooltip_enable', [ 'label' => __( 'Tooltip', 'elementor-extras' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'label_on' => __( 'Yes', 'elementor-extras' ), 'label_off' => __( 'No', 'elementor-extras' ), 'return_value' => 'yes', 'separator' => 'before', 'frontend_available' => true, ] ); $element->start_controls_tabs( 'tooltip' ); $element->start_controls_tab( 'tooltip_settings', [ 'label' => __( 'Settings', 'elementor-extras' ), 'condition' => [ 'tooltip_enable!' => '', ], ] ); $element->add_group_control( Group_Control_Tooltip::get_type(), [ 'name' => 'tooltip', 'condition' => [ 'tooltip_enable!' => '', ], ] ); $element->update_control( 'tooltip_target', [ 'options' => array( 'element' => ucfirst( $element_type ), ), ], [ 'recursive' => true, ] ); $element->end_controls_tab(); $element->start_controls_tab( 'tooltip_style', [ 'label' => __( 'Style', 'elementor-extras' ), 'condition' => [ 'tooltip_enable!' => '', ], ] ); $element->add_control( 'tooltip_width', [ 'label' => __( 'Max Width', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '', ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 500, ], ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'max-width: {{SIZE}}{{UNIT}};', ] ] ); $element->add_control( 'tooltip_distance', [ 'label' => __( 'Distance', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}.to--top' => 'transform: translateY(-{{SIZE}}{{UNIT}});', '.ee-tooltip.ee-tooltip-{{ID}}.to--bottom' => 'transform: translateY({{SIZE}}{{UNIT}});', '.ee-tooltip.ee-tooltip-{{ID}}.to--left' => 'transform: translateX(-{{SIZE}}{{UNIT}});', '.ee-tooltip.ee-tooltip-{{ID}}.to--right' => 'transform: translateX({{SIZE}}{{UNIT}});', ] ] ); $element->add_control( 'tooltip_offset', [ 'label' => __( 'Offset', 'elementor-extras' ), 'description' => __( 'Adjust offset to align arrow with target.', 'elementor-extras' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0, ], 'range' => [ 'px' => [ 'min' => -100, 'max' => 100, ], ], 'condition' => [ 'image[url]!' => '', ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}.to--top, .ee-tooltip.ee-tooltip-{{ID}}.to--bottom' => 'margin-left: {{SIZE}}{{UNIT}};', '.ee-tooltip.ee-tooltip-{{ID}}.to--left, .ee-tooltip.ee-tooltip-{{ID}}.to--right' => 'margin-top: {{SIZE}}{{UNIT}};', ] ] ); $element->add_control( 'tooltip_arrow', [ 'label' => __( 'Arrow', 'elementor-extras' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => __( 'Show', 'elementor-extras' ), 'none' => __( 'Hide', 'elementor-extras' ), ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}:after' => 'content: {{VALUE}};', ], ] ); $element->add_control( 'tooltip_align', [ 'label' => __( 'Text Align', 'elementor-extras' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor-extras' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor-extras' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor-extras' ), 'icon' => 'fa fa-align-right', ], ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'text-align: {{VALUE}};', ], ] ); $element->add_control( 'tooltip_padding', [ 'label' => __( 'Padding', 'elementor-extras' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $element->add_control( 'tooltip_border_radius', [ 'label' => __( 'Border Radius', 'elementor-extras' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $element->add_control( 'tooltip_zindex', [ 'label' => __( 'zIndex', 'elementor-extras' ), 'description' => __( 'Adjust the z-index of the tooltip. Defaults to 999', 'elementor-extras' ), 'type' => Controls_Manager::NUMBER, 'default' => '', 'min' => -9999999, 'step' => 1, 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'z-index: {{SIZE}};', ] ] ); $element->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'tooltip_typography', 'selector' => '.ee-tooltip.ee-tooltip-{{ID}}', 'separator' => 'after', ] ); $element->add_control( 'tooltip_background_color', [ 'label' => __( 'Background Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'selectors' => Utils::get_tooltip_background_selectors(), ] ); $element->add_control( 'tooltip_color', [ 'label' => __( 'Color', 'elementor-extras' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '.ee-tooltip.ee-tooltip-{{ID}}' => 'color: {{VALUE}};', ], ] ); $element->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'tooltip_box_shadow', 'selector' => '.ee-tooltip.ee-tooltip-{{ID}}', 'separator' => '', ] ); $element->end_controls_tab(); $element->end_controls_tabs(); } /** * Add Actions * * @since 1.8.0 * * @access private */ protected function add_actions() { // Activate controls for widgets add_action( 'elementor/element/common/section_elementor_extras_advanced/before_section_end', function( $element, $args ) { $this->add_controls( $element, $args ); }, 10, 2 ); add_action( 'elementor/widget/before_render_content', function( $element ) { $settings = $element->get_settings_for_display(); if ( 'yes' !== $settings[ 'tooltip_enable' ] ) { return; } $element->add_render_attribute( 'tooltip', [ 'class' => 'hotip-content', 'id' => 'hotip-content-' . $element->get_id(), ] ); } ); add_action( 'elementor/widget/render_content', function( $widget_content, $element ) { $settings = $element->get_settings_for_display(); if ( 'yes' !== $settings[ 'tooltip_enable' ] ) { return $widget_content; } ob_start(); ?>get_render_attribute_string( 'tooltip' ); ?>> parse_text_editor( $settings['tooltip_content'], $element ); ?> <# if ( 'yes' === settings.tooltip_enable ) { view.addRenderAttribute( 'tooltip', 'class', 'hotip-content' ); view.addRenderAttribute( 'tooltip', 'id', 'hotip-content-' + view.$el.data('id') ); #> {{{ settings.tooltip_content }}} <# } #>get_settings() ); $content = shortcode_unautop( $content ); $content = do_shortcode( $content ); $content = wptexturize( $content ); if ( $GLOBALS['wp_embed'] instanceof \WP_Embed ) { $content = $GLOBALS['wp_embed']->autoembed( $content ); } return $content; } }