ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / renovation-antibes / wp-content / plugins / elementor-extras / includes / widgets

<?php
namespace ElementorExtras;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Repeater;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Scheme_Color;
use Elementor\Scheme_Typography;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Elementor Widget_Hotspots
 *
 * @since 0.1.0
 */
class Widget_Hotspots extends Widget_Base {

public function get_name() {
		return 'hotspots';
	}

public function get_title() {
		return __( 'Hotspots', 'elementor-extras' );
	}

public function get_icon() {
		return 'nicon nicon-hotspots';
	}

public function get_categories() {
		return [ 'elementor-extras' ];
	}

public function get_script_depends() {
		return [ 'hotips' ];
	}

protected function _register_controls() {

$this->start_controls_section(
			'section_image',
			[
				'label' => __( 'Image', 'elementor-extras' ),
			]
		);

$this->add_control(
				'image',
				[
					'label' => __( 'Choose Image', 'elementor-extras' ),
					'type' => Controls_Manager::MEDIA,
					'default' => [
						'url' => Utils::get_placeholder_image_src(),
					],
				]
			);

$this->add_group_control(
				Group_Control_Image_Size::get_type(),
				[
					'name' => 'image', // Actually its `image_size`
					'label' => __( 'Image Size', 'elementor-extras' ),
					'default' => 'large',
				]
			);

$this->add_responsive_control(
				'align',
				[
					'label' => __( 'Alignment', 'elementor-extras' ),
					'type' => Controls_Manager::CHOOSE,
					'options' => [
						'left' => [
							'title' => __( 'Left', 'elementor-extras' ),
							'icon' => 'eicon-h-align-left',
						],
						'center' => [
							'title' => __( 'Center', 'elementor-extras' ),
							'icon' => 'eicon-h-align-center',
						],
						'right' => [
							'title' => __( 'Right', 'elementor-extras' ),
							'icon' => 'eicon-h-align-right',
						],
					],
					'default' => 'center',
					'selectors' => [
						'{{WRAPPER}}' => 'text-align: {{VALUE}};',
					],
				]
			);

$this->add_control(
				'view',
				[
					'label' => __( 'View', 'elementor-extras' ),
					'type' => Controls_Manager::HIDDEN,
					'default' => 'traditional',
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_hotspots',
			[
				'label' => __( 'Hotspots', 'elementor-extras' ),
				'condition'		=> [
					'image[url]!' => '',
				]
			]
		);

$repeater = new Repeater();

$repeater->start_controls_tabs( 'hotspots_repeater' );

$repeater->start_controls_tab( 'tab_content', [ 'label' => __( 'Content', 'elementor-extras' ) ] );

$repeater->add_control(
					'hotspot',
					[
						'label'		=> __( 'Type', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SELECT,
						'default' 	=> 'text',
						'options' 	=> [
							'text' 		=> __( 'Text', 'elementor-extras' ),
							'icon' 		=> __( 'Icon', 'elementor-extras' ),
						],
					]
				);

$repeater->add_control(
					'text',
					[
						'default'	=> __( 'X', 'elementor-extras' ),
						'type'		=> Controls_Manager::TEXT,
						'label' 	=> __( 'Text', 'elementor-extras' ),
						'separator' => 'none',
						'condition'		=> [
							'hotspot'	=> 'text'
						]
					]
				);

$repeater->add_control(
					'icon',
					[
						'label' 		=> __( 'Icon', 'elementor-extras' ),
						'type' 			=> Controls_Manager::ICON,
						'label_block' 	=> true,
						'default' 		=> '',
						'condition'		=> [
							'hotspot'	=> 'icon'
						],
						'frontend_available' => true,
					]
				);

$repeater->add_control(
					'link',
					[
						'label' 		=> __( 'Link', 'elementor-extras' ),
						'description' 	=> __( 'Active only when tolltips\' Trigger is set to Hover', 'elementor-extras' ),
						'type' 			=> Controls_Manager::URL,
						'placeholder' 	=> esc_url( home_url( '/' ) ),
						'default' 		=> [
							'url' 		=> esc_url( home_url( '/' ) ),
						],
						'frontend_available' => true,
					]
				);

$repeater->add_control(
					'content',
					[
						'label' 	=> '',
						'type' 		=> Controls_Manager::WYSIWYG,
						'default' 	=> __( 'I am a tooltip for a hotspot', 'elementor-extras' ),
					]
				);

$repeater->add_control(
					'_item_id',
					[
						'label' 		=> __( 'CSS ID', 'elementor-extras' ),
						'type' 			=> Controls_Manager::TEXT,
						'default' 		=> '',
						'label_block' 	=> true,
						'title' 		=> __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor-extras' ),
					]
				);

$repeater->add_control(
					'css_classes',
					[
						'label' 		=> __( 'CSS Classes', 'elementor-extras' ),
						'type' 			=> Controls_Manager::TEXT,
						'default' 		=> '',
						'prefix_class' 	=> '',
						'label_block' 	=> true,
						'title' 		=> __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor-extras' ),
					]
				);

$repeater->end_controls_tab();

$repeater->start_controls_tab( 'tab_position', [ 'label' => __( 'Position', 'elementor-extras' ) ] );

$repeater->add_control(
					'_position_horizontal',
					[
						'label' 	=> __( 'Horizontal position (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'range' 	=> [
							'px' 	=> [
								'min' 	=> 0,
								'max' 	=> 100,
								'step'	=> 0.1,
							],
						],
						'selectors' => [
							'{{WRAPPER}} {{CURRENT_ITEM}}' => 'left: {{SIZE}}%;',
						],
					]
				);

$repeater->add_control(
					'_position_vertical',
					[
						'label' 	=> __( 'Vertical position (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'range' 	=> [
							'px' 	=> [
								'min' 	=> 0,
								'max' 	=> 100,
								'step'	=> 0.1,
							],
						],
						'selectors' => [
							'{{WRAPPER}} {{CURRENT_ITEM}}' => 'top: {{SIZE}}%;',
						],
					]
				);

$repeater->add_control(
					'tooltip_position',
					[
						'label'		=> __( 'Tooltip Position', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SELECT,
						'default' 	=> '',
						'options' 	=> [
							'' 			=> __( 'Global', 'elementor-extras' ),
							'bottom' 	=> __( 'Bottom', 'elementor-extras' ),
							'left' 		=> __( 'Left', 'elementor-extras' ),
							'top' 		=> __( 'Top', 'elementor-extras' ),
							'right' 	=> __( 'Right', 'elementor-extras' ),
						],
					]
				);

$repeater->end_controls_tab();

$repeater->end_controls_tabs();

$this->add_control(
				'hotspots',
				[
					'label' 	=> __( 'Hotspots', 'elementor-extras' ),
					'type' 		=> Controls_Manager::REPEATER,
					'default' 	=> [
						[
							'text' 	=> '1',
						],
						[
							'text' 	=> '2',
						],
					],
					'fields' 		=> array_values( $repeater->get_controls() ),
					'title_field' 	=> '{{{ text }}}',
					'condition'		=> [
						'image[url]!' => '',
					]
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_tooltips',
			[
				'label' => __( 'Tooltips', 'elementor-extras' ),
				'condition'		=> [
					'image[url]!' => '',
				]
			]
		);

$this->add_control(
				'position',
				[
					'label'		=> __( 'Position', 'elementor-extras' ),
					'type' 		=> Controls_Manager::SELECT,
					'default' 	=> 'bottom',
					'options' 	=> [
						'bottom' 	=> __( 'Bottom', 'elementor-extras' ),
						'left' 		=> __( 'Left', 'elementor-extras' ),
						'top' 		=> __( 'Top', 'elementor-extras' ),
						'right' 	=> __( 'Right', 'elementor-extras' ),
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'frontend_available' => true
				]
			);

$this->add_control(
				'trigger',
				[
					'label'		=> __( 'Trigger', 'elementor-extras' ),
					'type' 		=> Controls_Manager::SELECT,
					'default' 	=> 'hover',
					'options' 	=> [
						'hover' 	=> __( 'Hover', 'elementor-extras' ),
						'click' 	=> __( 'Click', 'elementor-extras' ),
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'frontend_available' => true
				]
			);

$this->add_control(
				'arrow',
				[
					'label'		=> __( 'Arrow', 'elementor-extras' ),
					'type' 		=> Controls_Manager::SELECT,
					'default' 	=> '""',
					'options' 	=> [
						'""' 	=> __( 'Show', 'elementor-extras' ),
						'none' 	=> __( 'Hide', 'elementor-extras' ),
					],
					'selectors' => [
						'.elementor-tooltip-{{ID}}.hotip-tooltip:after' => 'content: {{VALUE}};',
					],
					'condition'		=> [
						'image[url]!' => '',
					]
				]
			);

$this->add_control(
				'distance',
				[
					'label' 		=> __( 'Distance', 'elementor-extras' ),
					'description' 	=> __( 'The distance between the tooltip and the hotspot. Defaults to 6px', 'elementor-extras' ),
					'type' 			=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 0,
					],
					'range' 	=> [
						'px' 	=> [
							'min' 	=> 0,
							'max' 	=> 100,
						],
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'selectors'		=> [
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--top' 			=> 'transform: translateY(-{{SIZE}}{{UNIT}});',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--bottom' 		=> 'transform: translateY({{SIZE}}{{UNIT}});',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--left' 			=> 'transform: translateX(-{{SIZE}}{{UNIT}});',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--right' 		=> 'transform: translateX({{SIZE}}{{UNIT}});',
					]
				]
			);

$this->add_control(
				'delay_in',
				[
					'label' 		=> __( 'Delay in (s)', 'elementor-extras' ),
					'description' 	=> __( 'Time until tooltips appear.', 'elementor-extras' ),
					'type' 			=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 0,
					],
					'range' 	=> [
						'px' 	=> [
							'min' 	=> 0,
							'max' 	=> 1,
							'step'	=> 0.1,
						],
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'frontend_available' => true
				]
			);

$this->add_control(
				'delay_out',
				[
					'label' 		=> __( 'Delay out (s)', 'elementor-extras' ),
					'description' 	=> __( 'Time until tooltips dissapear.', 'elementor-extras' ),
					'type' 			=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 0,
					],
					'range' 	=> [
						'px' 	=> [
							'min' 	=> 0,
							'max' 	=> 1,
							'step'	=> 0.1,
						],
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'frontend_available' => true
				]
			);

$this->add_control(
				'width',
				[
					'label' 		=> __( 'Width', 'elementor-extras' ),
					'type' 			=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 200,
					],
					'range' 	=> [
						'px' 	=> [
							'min' 	=> 0,
							'max' 	=> 500,
						],
					],
					'condition'		=> [
						'image[url]!' => '',
					],
					'selectors'		=> [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' 			=> 'width: {{SIZE}}{{UNIT}};',
					]
				]
			);

$this->add_control(
				'zindex',
				[
					'label'			=> __( 'zIndex', 'elementor-extras' ),
					'description'   => __( 'Adjust the z-index of the tooltips. Defaults to 999', 'elementor-extras' ),
					'type'			=> Controls_Manager::NUMBER,
					'default'		=> '999',
					'min'			=> -9999999,
					'step'			=> 1,
					'condition'		=> [
						'image[url]!' => '',
					],
					'selectors'		=> [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' => 'z-index: {{SIZE}};',
					]
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_style_image',
			[
				'label' => __( 'Image', 'elementor-extras' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'opacity',
				[
					'label' 	=> __( 'Opacity (%)', 'elementor-extras' ),
					'type' 		=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 1,
					],
					'range' 	=> [
						'px' 	=> [
							'max' 	=> 1,
							'min' 	=> 0.10,
							'step' 	=> 0.01,
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-hotspots img' => 'opacity: {{SIZE}};',
					],
				]
			);

$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name' 		=> 'image_border',
					'label' 	=> __( 'Image Border', 'elementor-extras' ),
					'selector' 	=> '{{WRAPPER}} .elementor-hotspots img',
				]
			);

$this->add_control(
				'image_border_radius',
				[
					'label' 		=> __( 'Border Radius', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-hotspots img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				[
					'name' 		=> 'image_box_shadow',
					'selector' 	=> '{{WRAPPER}} .elementor-hotspots img',
					'separator'	=> '',
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_style_hotspots',
			[
				'label' => __( 'Hotspots', 'elementor-extras' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'hotspots_padding',
				[
					'label' 		=> __( 'Text Padding', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', 'em', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-hotspot-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
					'separator' => 'before',
				]
			);

$this->add_control(
				'hotspots_border_radius',
				[
					'label' 	=> __( 'Border Radius', 'elementor-extras' ),
					'type' 		=> Controls_Manager::SLIDER,
					'default' 	=> [
						'size' 	=> 100,
					],
					'range' 	=> [
						'px' 	=> [
							'max' 	=> 100,
							'min' 	=> 0,
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-hotspot-wrapper' => 'border-radius: {{SIZE}}px;',
						'{{WRAPPER}} .elementor-hotspot-wrapper:before' => 'border-radius: {{SIZE}}px;',
					],
				]
			);

$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' 		=> 'hotspots_typography',
					'selector' 	=> '{{WRAPPER}} .elementor-hotspot-wrapper',
					'scheme' 	=> Scheme_Typography::TYPOGRAPHY_3,
				]
			);

$this->start_controls_tabs( 'tabs_hotspots_style' );

$this->start_controls_tab(
				'tab_hotspots_default',
				[
					'label' => __( 'Default', 'elementor-extras' ),
				]
			);

$this->add_control(
					'hotspots_opacity',
					[
						'label' 	=> __( 'Opacity (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 1,
						],
						'range' 	=> [
							'px' 	=> [
								'max' 	=> 1,
								'min' 	=> 0.10,
								'step' 	=> 0.01,
							],
						],
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-hotspot-wrapper' => 'opacity: {{SIZE}};',
						],
					]
				);

$this->add_control(
					'hotspots_size',
					[
						'label' 	=> __( 'Size', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 1,
						],
						'range' 	=> [
							'px' 	=> [
								'max' 	=> 2,
								'min' 	=> 0.5,
								'step'	=> 0.01,
							],
						],
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-hotspot-wrapper' => 'transform: scale({{SIZE}})',
						],
					]
				);

$this->add_control(
					'hotspots_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default'	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-hotspot-wrapper' => 'color: {{VALUE}};',
						],
					]
				);

$this->add_control(
					'hotspots_background_color',
					[
						'label' 	=> __( 'Background Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'scheme' 	=> [
						    'type' 	=> Scheme_Color::get_type(),
						    'value' => Scheme_Color::COLOR_1,
						],
						'selectors' => [
							'{{WRAPPER}} .elementor-hotspot-wrapper' 		=> 'background-color: {{VALUE}};',
							'{{WRAPPER}} .elementor-hotspot-wrapper:before' => 'background-color: {{VALUE}};',
						],
					]
				);

$this->add_group_control(
					Group_Control_Border::get_type(),
					[
						'name' 		=> 'hotspots_border',
						'label' 	=> __( 'Text Border', 'elementor-extras' ),
						'selector' 	=> '{{WRAPPER}} .elementor-hotspot-wrapper',
					]
				);

$this->add_group_control(
					Group_Control_Box_Shadow::get_type(),
					[
						'name' 		=> 'hotspots_box_shadow',
						'selector' 	=> '{{WRAPPER}} .elementor-hotspot-wrapper',
						'separator'	=> ''
					]
				);

$this->end_controls_tab();

$this->start_controls_tab(
				'tab_hotspots_hover',
				[
					'label' => __( 'Hover', 'elementor-extras' ),
				]
			);

$this->add_control(
					'hotspots_hover_opacity',
					[
						'label' 	=> __( 'Opacity (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 1,
						],
						'range' 	=> [
							'px' 	=> [
								'max' 	=> 1,
								'min' 	=> 0.10,
								'step' 	=> 0.01,
							],
						],
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-hotspot-wrapper:hover' => 'opacity: {{SIZE}};',
						],
					]
				);

$this->add_control(
					'hotspots_hover_size',
					[
						'label' 	=> __( 'Size', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 1,
						],
						'range' 	=> [
							'px' 	=> [
								'max' 	=> 2,
								'min' 	=> 0.5,
								'step'	=> 0.01,
							],
						],
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-hotspot-wrapper:hover' => 'transform: scale({{SIZE}})',
						],
					]
				);

$this->add_control(
					'hotspots_hover_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default'	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-hotspot-wrapper:hover' => 'color: {{VALUE}};',
						],
					]
				);

$this->add_control(
					'hotspots_hover_background_color',
					[
						'label' 	=> __( 'Background Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'scheme' 	=> [
						    'type' 	=> Scheme_Color::get_type(),
						    'value' => Scheme_Color::COLOR_4,
						],
						'selectors' => [
							'{{WRAPPER}} .elementor-hotspot-wrapper:hover' 		=> 'background-color: {{VALUE}};',
							'{{WRAPPER}} .elementor-hotspot-wrapper:hover:before' => 'background-color: {{VALUE}};',
						],
					]
				);

$this->add_group_control(
					Group_Control_Border::get_type(),
					[
						'name' 		=> 'hotspots_hover_border',
						'label' 	=> __( 'Text Border', 'elementor-extras' ),
						'selector' 	=> '{{WRAPPER}} .elementor-hotspot-wrapper:hover',
					]
				);

$this->add_group_control(
					Group_Control_Box_Shadow::get_type(),
					[
						'name' 		=> 'hotspot_shover_box_shadow',
						'selector' 	=> '{{WRAPPER}} .elementor-hotspot-wrapper:hover',
						'separator'	=> ''
					]
				);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
			'section_tooltips_style',
			[
				'label' => __( 'Tooltips', 'elementor-extras' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'tooltips_align',
				[
					'label' 	=> __( 'Alignment', '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',
						],
					],
					'default' 	=> 'center',
					'selectors' => [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' => 'text-align: {{VALUE}};',
					],
				]
			);

$this->add_control(
				'tooltips_padding',
				[
					'label' 		=> __( 'Padding', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', 'em', '%' ],
					'selectors' 	=> [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'tooltips_border_radius',
				[
					'label' 		=> __( 'Border Radius', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', '%' ],
					'selectors' 	=> [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'tooltips_background_color',
				[
					'label' 	=> __( 'Background Color', 'elementor-extras' ),
					'type' 		=> Controls_Manager::COLOR,
					'scheme' 	=> [
					    'type' 	=> Scheme_Color::get_type(),
					    'value' => Scheme_Color::COLOR_1,
					],
					'selectors' => [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' 					=> 'background-color: {{VALUE}};',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--top:after' 	=> 'border-top-color: {{VALUE}};',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--right:after' 	=> 'border-right-color: {{VALUE}};',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--bottom:after' 	=> 'border-bottom-color: {{VALUE}};',
						'.elementor-tooltip-{{ID}}.hotip-tooltip.to--left:after' 	=> 'border-left-color: {{VALUE}};',
					],
				]
			);

$this->add_control(
				'tooltips_color',
				[
					'label' 	=> __( 'Color', 'elementor-extras' ),
					'type' 		=> Controls_Manager::COLOR,
					'default'	=> '',
					'selectors' => [
						'.elementor-tooltip-{{ID}}.hotip-tooltip' 		=> 'color: {{VALUE}};',
					],
				]
			);

$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name' 		=> 'tooltips_border',
					'label' 	=> __( 'Border', 'elementor-extras' ),
					'selector' 	=> '.elementor-tooltip-{{ID}}.hotip-tooltip',
				]
			);

$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' 		=> 'tooltips_typography',
					'selector' 	=> '.elementor-tooltip-{{ID}}.hotip-tooltip',
					'scheme' 	=> Scheme_Typography::TYPOGRAPHY_3,
					'separator' => '',
				]
			);

$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				[
					'name' 		=> 'tooltips_box_shadow',
					'selector' 	=> '.elementor-tooltip-{{ID}}.hotip-tooltip',
					'separator'	=> '',
				]
			);

$this->end_controls_section();
		
	}

protected function render() {
		$settings = $this->get_settings();

if ( empty( $settings['image']['url'] ) ) {
			return;
		}

$this->add_render_attribute( 'wrapper', 'class', 'elementor-hotspots' );

?>
		<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>

<?php echo Group_Control_Image_Size::get_attachment_image_html( $settings ); ?>

<?php if( $settings['hotspots'] ) : ?>
				<?php $counter = 1; ?>
				<div class="elementor-hotspots-container">
				<?php foreach ( $settings['hotspots'] as $item ) :

$hotspot_id 		= '';
					$hotspot_classes 	= '';
					$hotspot_tag		= 'div';

$hotspot_classes 	.= " elementor-repeater-item-" . $item['_id'];
					
					if ( $item['_item_id'] ) {
						$hotspot_id = ' id="' . $item['_item_id'] . '"';
					}

if ( $item['css_classes'] ) {
						$hotspot_classes .= ' ' . $item['css_classes'];
					}

if ( ! empty( $item['link']['url'] ) && $settings['trigger'] !== 'click' ) {

$hotspot_tag = 'a';

$this->add_render_attribute( 'link' . $counter, 'href', $item['link']['url'] );

if ( $item['link']['is_external'] ) {
							$this->add_render_attribute( 'link' . $counter, 'target', '_blank' );
						}

if ( ! empty( $item['link']['nofollow'] ) ) {
							$this->add_render_attribute( 'link' . $counter, 'rel', 'nofollow' );
						}
					}

$content_id = $this->get_id() . '_' . $item['_id'];

<<?php echo $hotspot_tag; ?> <?php echo $this->get_render_attribute_string( 'link' . $counter ); ?> <?php echo $hotspot_id; ?> data-hotips-content="#hotip-content-<?php echo $content_id; ?>" data-hotips-position="<?php echo $item['tooltip_position']; ?>" data-hotips-class="elementor-tooltip-<?php echo $this->get_id(); ?>" class="hotip elementor-hotspot <?php echo $hotspot_classes; ?>">
						<span class="elementor-hotspot-wrapper">
							<span class="elementor-hotspot-text">
								<?php if ( 'icon' === $item['hotspot'] && ! empty( $item['icon'] ) ) : ?>
									<i class="<?php echo esc_attr( $item['icon'] ); ?>"></i>
								<?php else : ?>
									<?php echo $item['text']; ?>
								<?php endif; ?>
							</span>
						</span>
					</<?php echo $hotspot_tag; ?>>
					<span class="hotip-content" id="hotip-content-<?php echo $content_id; ?>"><?php echo $this->parse_text_editor( $item['content'] ); ?></span>

<?php $counter++;
				endforeach; ?>
				</div>
			<?php endif; ?>
		
		</div>
		<?php
	}

protected function _content_template() {
		?>
		<# if ( '' !== settings.image.url ) {
			var image = {
				id: settings.image.id,
				url: settings.image.url,
				size: settings.image_size,
				dimension: settings.image_custom_dimension,
				model: editModel
			};

var currentItem = ( editSettings.activeItemIndex > 0 ) ? editSettings.activeItemIndex : false;

var image_url = elementor.imagesManager.getImageUrl( image ),
				hotips_settings = {};

#><div class="elementor-hotspots"><#

var imgClass = ''; #>

<#
			if ( settings.hotspots ) {
				var counter = 1; #>
				<div class="elementor-hotspots-container">
				<# _.each( settings.hotspots, function( item ) {

var hotspot_tag = 'div';

// Set current class
					var currentClass = '';
					if ( currentItem == counter ) { currentClass = 'is--active'; }

if ( '' !== item.link.url && 'click' !== settings.trigger ) {
						hotspot_tag = 'a';
					}
				#>
					<{{ hotspot_tag }} id="{{ item._item_id }}" data-hotips-position="{{ item.tooltip_position }}" data-hotips-content="#hotip-content-{{ item._id }}" class="hotip elementor-hotspot elementor-repeater-item-{{ item._id }} {{ item.css_classes }} {{ currentClass }}">
						<span class="elementor-hotspot-wrapper">
							<span class="elementor-hotspot-text">
								<# if ( 'icon' === item.hotspot ) { #>
									<i class="{{ item.icon }}"></i>
								<# } else { #>
									{{ item.text }}
								<# } #>	
							</span>
						</span>
					</{{ hotspot_tag }}>
					<span class="hotip-content" id="hotip-content-{{ item._id }}">{{{ item.content }}}</span>

<# counter++;
				} ); #>
				</div>
			<# } #>

</div><#
		} #>
		<?php
	}
}

[+] ..
[-] text-divider.php [edit]
[-] button-group.php [edit]
[-] image-comparison.php [edit]
[-] heading-extra.php [edit]
[-] unfold.php [edit]
[-] gallery-slider.php [edit]
[-] gallery-extra.php [edit]
[-] hotspots.php [edit]
[-] html5-video.php [edit]
[-] tables.php [edit]
[-] index.php [edit]
[-] breadcrumbs.php [edit]
[-] devices.php [edit]
[-] timeline.php [edit]
[-] circle-progress.php [edit]