Tooltip.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 5.1.4

essential-addons-for-elementor-lite / includes / Elements / Tooltip.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 4 years ago Adv_Tabs.php 4 years ago Advanced_Data_Table.php 4 years ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 4 years ago Betterdocs_Category_Grid.php 4 years ago Betterdocs_Search_Form.php 4 years ago Caldera_Forms.php 4 years ago Career_Page.php 4 years ago Contact_Form_7.php 4 years ago Content_Ticker.php 4 years ago Countdown.php 4 years ago Creative_Button.php 4 years ago Crowdfundly_All_Campaign.php 4 years ago Crowdfundly_Organization.php 4 years ago Crowdfundly_Single_Campaign.php 4 years ago Cta_Box.php 4 years ago Data_Table.php 4 years ago Dual_Color_Header.php 4 years ago EmbedPress.php 4 years ago Event_Calendar.php 4 years ago Facebook_Feed.php 4 years ago Fancy_Text.php 4 years ago Feature_List.php 4 years ago Filterable_Gallery.php 4 years ago Flip_Box.php 4 years ago FluentForm.php 4 years ago Formstack.php 4 years ago GravityForms.php 4 years ago Image_Accordion.php 4 years ago Info_Box.php 4 years ago Interactive_Circle.php 4 years ago Login_Register.php 4 years ago NinjaForms.php 4 years ago Post_Grid.php 4 years ago Post_Timeline.php 4 years ago Pricing_Table.php 4 years ago Product_Grid.php 4 years ago Progress_Bar.php 4 years ago Simple_Menu.php 4 years ago Sticky_Video.php 4 years ago Team_Member.php 4 years ago Testimonial.php 4 years ago Tooltip.php 4 years ago Twitter_Feed.php 4 years ago TypeForm.php 4 years ago WeForms.php 4 years ago Woo_Cart.php 4 years ago Woo_Checkout.php 4 years ago Woo_Product_Carousel.php 4 years ago Woo_Product_Compare.php 4 years ago Woo_Product_Gallery.php 4 years ago Woocommerce_Review.php 4 years ago WpForms.php 4 years ago

Tooltip.php

738 lines

1	<?php
2	namespace Essential_Addons_Elementor\Elements;
3
4	// If this file is called directly, abort.
5	if (!defined('ABSPATH')) {
6	exit;
7	}
8
9	use \Elementor\Controls_Manager;
10	use \Elementor\Group_Control_Border;
11	use \Elementor\Group_Control_Box_Shadow;
12	use \Elementor\Group_Control_Typography;
13	use \Elementor\Utils;
14	use \Elementor\Widget_Base;
15
16	use \Essential_Addons_Elementor\Classes\Helper;
17
18	class Tooltip extends Widget_Base {
19
20	public function get_name() {
21	return 'eael-tooltip';
22	}
23
24	public function get_title() {
25	return esc_html__( 'Tooltip', 'essential-addons-for-elementor-lite');
26	}
27
28	public function get_icon() {
29	return 'eaicon-tooltip';
30	}
31
32	public function get_categories() {
33	return [ 'essential-addons-elementor' ];
34	}
35
36	public function get_keywords()
37	{
38	return [
39	'tooltip',
40	'ea tooltip',
41	'popover',
42	'hover',
43	'hint',
44	'floating text',
45	'glossary',
46	'ea',
47	'essential addons'
48	];
49	}
50
51	public function get_custom_help_url()
52	{
53	return 'https://essential-addons.com/elementor/docs/tooltip/';
54	}
55
56	protected function register_controls() {
57	/**
58	* Tooltip Settings
59	*/
60	$this->start_controls_section(
61	'eael_section_tooltip_settings',
62	[
63	'label' => esc_html__( 'Content Settings', 'essential-addons-for-elementor-lite')
64	]
65	);
66	$this->add_control(
67	'eael_tooltip_type',
68	[
69	'label' => esc_html__( 'Content Type', 'essential-addons-for-elementor-lite'),
70	'type' => Controls_Manager::CHOOSE,
71	'label_block' => true,
72	'options' => [
73	'icon' => [
74	'title' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite'),
75	'icon' => 'fa fa-info',
76	],
77	'text' => [
78	'title' => esc_html__( 'Text', 'essential-addons-for-elementor-lite'),
79	'icon' => 'fa fa-text-width',
80	],
81	'image' => [
82	'title' => esc_html__( 'Image', 'essential-addons-for-elementor-lite'),
83	'icon' => 'fa fa-image',
84	],
85	'shortcode' => [
86	'title' => esc_html__( 'Shortcode', 'essential-addons-for-elementor-lite'),
87	'icon' => 'fa fa-code',
88	],
89	],
90	'default' => 'icon',
91	]
92	);
93
94	$this->add_control(
95	'eael_tooltip_icon_content_new',
96	[
97	'label' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite'),
98	'type' => Controls_Manager::ICONS,
99	'fa4compatibility' => 'eael_tooltip_icon_content',
100	'default' => [
101	'value' => 'fas fa-home',
102	'library' => 'fa-solid',
103	],
104	'condition' => [
105	'eael_tooltip_type' => [ 'icon' ]
106	]
107	]
108	);
109
110	$this->add_responsive_control(
111	'eael_tooltip_icon_size',
112	[
113	'label' => esc_html__( 'Icon Size', 'essential-addons-for-elementor-lite'),
114	'type' => Controls_Manager::SLIDER,
115	'size_units' => [ '%', 'px' ],
116	'default' => [
117	'size' => 60,
118	],
119	'range' => [
120	'px' => [
121	'max' => 150,
122	],
123	'%' => [
124	'max' => 100
125	]
126	],
127	'selectors' => [
128	'{{WRAPPER}} .eael-tooltip .eael-tooltip-content i' => 'font-size: {{SIZE}}{{UNIT}};',
129	'{{WRAPPER}} .eael-tooltip .eael-tooltip-content .ea-tooltip-svg-trigger' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
130	],
131	'condition' => [
132	'eael_tooltip_type' => 'icon'
133	]
134	]
135	);
136
137	$this->add_control(
138	'eael_tooltip_content',
139	[
140	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite'),
141	'type' => Controls_Manager::WYSIWYG,
142	'label_block' => true,
143	'default' => esc_html__( 'Hover Me!', 'essential-addons-for-elementor-lite'),
144	'condition' => [
145	'eael_tooltip_type' => [ 'text' ]
146	],
147	'dynamic' => [ 'active' => true ]
148	]
149	);
150	$this->add_control(
151	'eael_tooltip_content_tag',
152	[
153	'label' => esc_html__( 'Content Tag', 'essential-addons-for-elementor-lite'),
154	'type' => Controls_Manager::SELECT,
155	'default' => 'span',
156	'label_block' => false,
157	'options' => [
158	'h1' => esc_html__( 'H1', 'essential-addons-for-elementor-lite'),
159	'h2' => esc_html__( 'H2', 'essential-addons-for-elementor-lite'),
160	'h3' => esc_html__( 'H3', 'essential-addons-for-elementor-lite'),
161	'h4' => esc_html__( 'H4', 'essential-addons-for-elementor-lite'),
162	'h5' => esc_html__( 'H5', 'essential-addons-for-elementor-lite'),
163	'h6' => esc_html__( 'H6', 'essential-addons-for-elementor-lite'),
164	'div' => esc_html__( 'DIV', 'essential-addons-for-elementor-lite'),
165	'span' => esc_html__( 'SPAN', 'essential-addons-for-elementor-lite'),
166	'p' => esc_html__( 'P', 'essential-addons-for-elementor-lite'),
167	],
168	'condition' => [
169	'eael_tooltip_type' => 'text'
170	]
171	]
172	);
173
174	$this->add_control(
175	'eael_tooltip_img_content',
176	[
177	'label' => esc_html__( 'Image', 'essential-addons-for-elementor-lite'),
178	'type' => Controls_Manager::MEDIA,
179	'default' => [
180	'url' => Utils::get_placeholder_image_src(),
181	],
182	'condition' => [
183	'eael_tooltip_type' => [ 'image' ]
184	]
185	]
186	);
187
188	$this->add_control(
189	'eael_tooltip_shortcode_content',
190	[
191	'label' => esc_html__( 'Shortcode', 'essential-addons-for-elementor-lite'),
192	'type' => Controls_Manager::TEXTAREA,
193	'label_block' => true,
194	'default' => esc_html__( '[shortcode-here]', 'essential-addons-for-elementor-lite'),
195	'condition' => [
196	'eael_tooltip_type' => [ 'shortcode' ]
197	]
198	]
199	);
200
201	$this->add_responsive_control(
202	'eael_tooltip_content_alignment',
203	[
204	'label' => esc_html__( 'Alignment', 'essential-addons-for-elementor-lite'),
205	'type' => Controls_Manager::CHOOSE,
206	'label_block' => true,
207	'options' => [
208	'left' => [
209	'title' => esc_html__( 'Left', 'essential-addons-for-elementor-lite'),
210	'icon' => 'eicon-text-align-left',
211	],
212	'center' => [
213	'title' => esc_html__( 'Center', 'essential-addons-for-elementor-lite'),
214	'icon' => 'eicon-text-align-center',
215	],
216	'right' => [
217	'title' => esc_html__( 'Right', 'essential-addons-for-elementor-lite'),
218	'icon' => 'eicon-text-align-right',
219	],
220	'justify' => [
221	'title' => __( 'Justified', 'essential-addons-for-elementor-lite'),
222	'icon' => 'eicon-text-align-justify',
223	],
224	],
225	'default' => 'left',
226	'prefix_class' => 'eael-tooltip-align%s-',
227	]
228	);
229
230	$this->add_control(
231	'eael_tooltip_enable_link',
232	[
233	'label' => esc_html__( 'Enable Link', 'essential-addons-for-elementor-lite'),
234	'type' => Controls_Manager::SWITCHER,
235	'default' => 'false',
236	'return_value' => 'yes',
237	'condition' => [
238	'eael_tooltip_type!' => ['shortcode']
239	]
240	]
241	);
242	$this->add_control(
243	'eael_tooltip_link',
244	[
245	'label' => esc_html__( 'Button Link', 'essential-addons-for-elementor-lite'),
246	'type' => Controls_Manager::URL,
247	'dynamic' => ['active' => true],
248	'label_block' => true,
249	'default' => [
250	'url' => '#',
251	'is_external' => '',
252	],
253	'show_external' => true,
254	'condition' => [
255	'eael_tooltip_enable_link' => 'yes'
256	]
257	]
258	);
259	$this->end_controls_section();
260
261	/**
262	* Tooltip Hover Content Settings
263	*/
264	$this->start_controls_section(
265	'eael_section_tooltip_hover_content_settings',
266	[
267	'label' => esc_html__( 'Tooltip Settings', 'essential-addons-for-elementor-lite')
268	]
269	);
270	$this->add_control(
271	'eael_tooltip_hover_content',
272	[
273	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite'),
274	'type' => Controls_Manager::WYSIWYG,
275	'label_block' => true,
276	'default' => esc_html__( 'Tooltip content', 'essential-addons-for-elementor-lite'),
277	'dynamic' => [ 'active' => true ]
278	]
279	);
280	$this->add_control(
281	'eael_tooltip_hover_dir',
282	[
283	'label' => esc_html__( 'Hover Direction', 'essential-addons-for-elementor-lite'),
284	'type' => Controls_Manager::SELECT,
285	'default' => 'right',
286	'label_block' => false,
287	'options' => [
288	'left' => esc_html__( 'Left', 'essential-addons-for-elementor-lite'),
289	'right' => esc_html__( 'Right', 'essential-addons-for-elementor-lite'),
290	'top' => esc_html__( 'Top', 'essential-addons-for-elementor-lite'),
291	'bottom' => esc_html__( 'Bottom', 'essential-addons-for-elementor-lite'),
292	],
293	]
294	);
295	$this->add_control(
296	'eael_tooltip_hover_speed',
297	[
298	'label' => esc_html__( 'Hover Speed', 'essential-addons-for-elementor-lite'),
299	'type' => Controls_Manager::TEXT,
300	'label_block' => false,
301	'default' => esc_html__( '300', 'essential-addons-for-elementor-lite'),
302	'selectors' => [
303	'{{WRAPPER}} .eael-tooltip:hover .eael-tooltip-text.eael-tooltip-top' => 'animation-duration: {{SIZE}}ms;',
304	'{{WRAPPER}} .eael-tooltip:hover .eael-tooltip-text.eael-tooltip-left' => 'animation-duration: {{SIZE}}ms;',
305	'{{WRAPPER}} .eael-tooltip:hover .eael-tooltip-text.eael-tooltip-bottom' => 'animation-duration: {{SIZE}}ms;',
306	'{{WRAPPER}} .eael-tooltip:hover .eael-tooltip-text.eael-tooltip-right' => 'animation-duration: {{SIZE}}ms;',
307	]
308	]
309	);
310	$this->end_controls_section();
311
312	/**
313	* -------------------------------------------
314	* Tab Style Tooltip Content
315	* -------------------------------------------
316	*/
317	$this->start_controls_section(
318	'eael_section_tooltip_style_settings',
319	[
320	'label' => esc_html__( 'Content Style', 'essential-addons-for-elementor-lite'),
321	'tab' => Controls_Manager::TAB_STYLE,
322	]
323	);
324	$this->add_responsive_control(
325	'eael_tooltip_max_width',
326	[
327	'label' => __( 'Content Max Width', 'essential-addons-for-elementor-lite'),
328	'type' => Controls_Manager::SLIDER,
329	'range' => [
330	'px' => [
331	'min' => 0,
332	'max' => 1000,
333	'step' => 5,
334	],
335	'%' => [
336	'min' => 0,
337	'max' => 100,
338	],
339	],
340	'size_units' => [ 'px', '%' ],
341	'selectors' => [
342	'{{WRAPPER}} .eael-tooltip' => 'max-width: {{SIZE}}{{UNIT}};',
343	]
344	]
345	);
346	$this->add_responsive_control(
347	'eael_tooltip_content_padding',
348	[
349	'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite'),
350	'type' => Controls_Manager::DIMENSIONS,
351	'size_units' => [ 'px', 'em', '%' ],
352	'selectors' => [
353	'{{WRAPPER}} .eael-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
354	],
355	]
356	);
357	$this->add_responsive_control(
358	'eael_tooltip_content_margin',
359	[
360	'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite'),
361	'type' => Controls_Manager::DIMENSIONS,
362	'size_units' => [ 'px', 'em', '%' ],
363	'selectors' => [
364	'{{WRAPPER}} .eael-tooltip' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
365	],
366	]
367	);
368
369	$this->add_responsive_control(
370	'eael_tooltip_text_alignment',
371	[
372	'label' => esc_html__( 'Content Alignment', 'essential-addons-for-elementor-lite'),
373	'type' => Controls_Manager::CHOOSE,
374	'label_block' => true,
375	'options' => [
376	'left' => [
377	'title' => esc_html__( 'Left', 'essential-addons-for-elementor-lite'),
378	'icon' => 'eicon-text-align-left',
379	],
380	'center' => [
381	'title' => esc_html__( 'Center', 'essential-addons-for-elementor-lite'),
382	'icon' => 'eicon-text-align-center',
383	],
384	'right' => [
385	'title' => esc_html__( 'Right', 'essential-addons-for-elementor-lite'),
386	'icon' => 'eicon-text-align-right',
387	],
388	'justify' => [
389	'title' => __( 'Justified', 'essential-addons-for-elementor-lite'),
390	'icon' => 'eicon-text-align-justify',
391	],
392	],
393	'condition' => [
394	'eael_tooltip_type' => 'text'
395	],
396	'default' => 'left',
397	'prefix_class' => 'eael-tooltip-text-align-',
398	]
399	);
400
401	$this->start_controls_tabs( 'eael_tooltip_content_style_tabs' );
402	// Normal State Tab
403	$this->start_controls_tab( 'eael_tooltip_content_normal', [ 'label' => esc_html__( 'Normal', 'essential-addons-for-elementor-lite') ] );
404	$this->add_control(
405	'eael_tooltip_content_bg_color',
406	[
407	'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite'),
408	'type' => Controls_Manager::COLOR,
409	'default' => '',
410	'selectors' => [
411	'{{WRAPPER}} .eael-tooltip' => 'background-color: {{VALUE}};',
412	],
413	]
414	);
415	$this->add_control(
416	'eael_tooltip_content_color',
417	[
418	'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite'),
419	'type' => Controls_Manager::COLOR,
420	'default' => '',
421	'selectors' => [
422	'{{WRAPPER}} .eael-tooltip' => 'color: {{VALUE}};',
423	'{{WRAPPER}} .eael-tooltip a' => 'color: {{VALUE}};',
424	],
425	]
426	);
427	$this->add_group_control(
428	Group_Control_Box_Shadow::get_type(),
429	[
430	'name' => 'eael_tooltip_shadow',
431	'selector' => '{{WRAPPER}} .eael-tooltip',
432	'separator' => 'before'
433	]
434	);
435	$this->add_group_control(
436	Group_Control_Border::get_type(),
437	[
438	'name' => 'eael_tooltip_border',
439	'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite'),
440	'selector' => '{{WRAPPER}} .eael-tooltip',
441	]
442	);
443	$this->end_controls_tab();
444
445	// Hover State Tab
446	$this->start_controls_tab( 'eael_tooltip_content_hover', [ 'label' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite') ] );
447	$this->add_control(
448	'eael_tooltip_content_hover_bg_color',
449	[
450	'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite'),
451	'type' => Controls_Manager::COLOR,
452	'default' => '',
453	'selectors' => [
454	'{{WRAPPER}} .eael-tooltip:hover' => 'background-color: {{VALUE}};',
455	],
456	]
457	);
458	$this->add_control(
459	'eael_tooltip_content_hover_color',
460	[
461	'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite'),
462	'type' => Controls_Manager::COLOR,
463	'default' => '#212121',
464	'selectors' => [
465	'{{WRAPPER}} .eael-tooltip:hover' => 'color: {{VALUE}};',
466	'{{WRAPPER}} .eael-tooltip:hover a' => 'color: {{VALUE}};',
467	],
468	]
469	);
470	$this->add_group_control(
471	Group_Control_Box_Shadow::get_type(),
472	[
473	'name' => 'eael_tooltip_hover_shadow',
474	'selector' => '{{WRAPPER}} .eael-tooltip:hover',
475	'separator' => 'before'
476	]
477	);
478	$this->add_group_control(
479	Group_Control_Border::get_type(),
480	[
481	'name' => 'eael_tooltip_hover_border',
482	'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite'),
483	'selector' => '{{WRAPPER}} .eael-tooltip:hover',
484	]
485	);
486	$this->end_controls_tab();
487	$this->end_controls_tabs();
488
489	$this->add_group_control(
490	Group_Control_Typography::get_type(),
491	[
492	'name' => 'eael_tooltip_content_typography',
493	'selector' => '{{WRAPPER}} .eael-tooltip',
494	]
495	);
496	$this->add_responsive_control(
497	'eael_tooltip_content_radius',
498	[
499	'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite'),
500	'type' => Controls_Manager::DIMENSIONS,
501	'size_units' => [ 'px', 'em', '%' ],
502	'selectors' => [
503	'{{WRAPPER}} .eael-tooltip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
504	],
505	]
506	);
507	$this->end_controls_section();
508
509	if(!apply_filters('eael/pro_enabled', false)) {
510	$this->start_controls_section(
511	'eael_section_pro',
512	[
513	'label' => __( 'Go Premium for More Features', 'essential-addons-for-elementor-lite')
514	]
515	);
516
517	$this->add_control(
518	'eael_control_get_pro',
519	[
520	'label' => __( 'Unlock more possibilities', 'essential-addons-for-elementor-lite'),
521	'type' => Controls_Manager::CHOOSE,
522	'options' => [
523	'1' => [
524	'title' => '',
525	'icon' => 'fa fa-unlock-alt',
526	],
527	],
528	'default' => '1',
529	'description' => '<span class="pro-feature"> Get the <a href="https://wpdeveloper.com/upgrade/ea-pro" target="_blank">Pro version</a> for more stunning elements and customization options.</span>'
530	]
531	);
532
533	$this->end_controls_section();
534	}
535
536	/**
537	* -------------------------------------------
538	* Tab Style Tooltip Hover Content
539	* -------------------------------------------
540	*/
541	$this->start_controls_section(
542	'eael_section_tooltip_hover_style_settings',
543	[
544	'label' => esc_html__( 'Tooltip Style', 'essential-addons-for-elementor-lite'),
545	'tab' => Controls_Manager::TAB_STYLE,
546	]
547	);
548	$this->add_responsive_control(
549	'eael_tooltip_hover_width',
550	[
551	'label' => __( 'Tooltip Width', 'essential-addons-for-elementor-lite'),
552	'type' => Controls_Manager::SLIDER,
553	'default' => [
554	'size' => '150'
555	],
556	'range' => [
557	'px' => [
558	'min' => 0,
559	'max' => 1000,
560	'step' => 5,
561	],
562	'%' => [
563	'min' => 0,
564	'max' => 100,
565	],
566	],
567	'size_units' => [ 'px', '%' ],
568	'selectors' => [
569	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'width: {{SIZE}}{{UNIT}};',
570	]
571	]
572	);
573	$this->add_responsive_control(
574	'eael_tooltip_hover_max_width',
575	[
576	'label' => __( 'Tooltip Max Width', 'essential-addons-for-elementor-lite'),
577	'type' => Controls_Manager::SLIDER,
578	'default' => [
579	'size' => '150'
580	],
581	'range' => [
582	'px' => [
583	'min' => 0,
584	'max' => 1000,
585	'step' => 5,
586	],
587	'%' => [
588	'min' => 0,
589	'max' => 100,
590	],
591	],
592	'size_units' => [ 'px', '%' ],
593	'selectors' => [
594	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'max-width: {{SIZE}}{{UNIT}};',
595	]
596	]
597	);
598	$this->add_responsive_control(
599	'eael_tooltip_hover_content_padding',
600	[
601	'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite'),
602	'type' => Controls_Manager::DIMENSIONS,
603	'size_units' => [ 'px', 'em', '%' ],
604	'selectors' => [
605	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
606	],
607	]
608	);
609	$this->add_responsive_control(
610	'eael_tooltip_hover_content_margin',
611	[
612	'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite'),
613	'type' => Controls_Manager::DIMENSIONS,
614	'size_units' => [ 'px', 'em', '%' ],
615	'selectors' => [
616	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
617	],
618	]
619	);
620	$this->add_control(
621	'eael_tooltip_hover_content_bg_color',
622	[
623	'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite'),
624	'type' => Controls_Manager::COLOR,
625	'default' => '#555',
626	'selectors' => [
627	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'background-color: {{VALUE}};',
628	],
629	]
630	);
631	$this->add_control(
632	'eael_tooltip_hover_content_color',
633	[
634	'label' => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite'),
635	'type' => Controls_Manager::COLOR,
636	'default' => '#fff',
637	'selectors' => [
638	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text' => 'color: {{VALUE}};',
639	],
640	]
641	);
642	$this->add_group_control(
643	Group_Control_Typography::get_type(),
644	[
645	'name' => 'eael_tooltip_hover_content_typography',
646	'selector' => '{{WRAPPER}} .eael-tooltip .eael-tooltip-text',
647	]
648	);
649	$this->add_group_control(
650	Group_Control_Box_Shadow::get_type(),
651	[
652	'name' => 'eael_tooltip_box_shadow',
653	'selector' => '{{WRAPPER}} .eael-tooltip .eael-tooltip-text',
654	]
655	);
656	$this->add_responsive_control(
657	'eael_tooltip_arrow_size',
658	[
659	'label' => __( 'Arrow Size', 'essential-addons-for-elementor-lite'),
660	'type' => Controls_Manager::SLIDER,
661	'default' => [
662	'size' => 5,
663	'unit' => 'px',
664	],
665	'size_units' => [ 'px' ],
666	'range' => [
667	'px' => [
668	'min' => 0,
669	'max' => 100,
670	'step' => 1,
671	]
672	],
673	'selectors' => [
674	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text:after' => 'border-width: {{SIZE}}{{UNIT}};',
675	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-left::after' => 'top: calc( 50% - {{SIZE}}{{UNIT}} );',
676	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-right::after' => 'top: calc( 50% - {{SIZE}}{{UNIT}} );',
677	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-top::after' => 'left: calc( 50% - {{SIZE}}{{UNIT}} );',
678	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-bottom::after' => 'left: calc( 50% - {{SIZE}}{{UNIT}} );',
679	],
680	]
681	);
682	$this->add_control(
683	'eael_tooltip_arrow_color',
684	[
685	'label' => esc_html__( 'Arrow Color', 'essential-addons-for-elementor-lite'),
686	'type' => Controls_Manager::COLOR,
687	'default' => '#555',
688	'selectors' => [
689	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-top:after' => 'border-top-color: {{VALUE}};',
690	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-bottom:after' => 'border-bottom-color: {{VALUE}};',
691	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-left:after' => 'border-left-color: {{VALUE}};',
692	'{{WRAPPER}} .eael-tooltip .eael-tooltip-text.eael-tooltip-right:after' => 'border-right-color: {{VALUE}};',
693	],
694	]
695	);
696	$this->end_controls_section();
697	}
698
699
700	protected function render( ) {
701
702	$settings = $this->get_settings_for_display();
703
704	$icon_migrated = isset($settings['__fa4_migrated']['eael_tooltip_icon_content_new']);
705	$icon_is_new = empty($settings['eael_tooltip_icon_content']);
706	$this->add_link_attributes( 'eael_tooltip_link', (array) $settings['eael_tooltip_link'] );
707	?>
708	<div class="eael-tooltip">
709	<?php if( $settings['eael_tooltip_type'] === 'text' ) : ?>
710	<<?php echo esc_attr( Helper::eael_validate_html_tag($settings['eael_tooltip_content_tag']) ); ?> class="eael-tooltip-content"><?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?><a <?php $this->print_render_attribute_string( 'eael_tooltip_link' ); ?>><?php endif; ?><?php echo wp_kses_post($settings['eael_tooltip_content']); ?><?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?></a><?php endif; ?></<?php echo esc_attr( Helper::eael_validate_html_tag($settings['eael_tooltip_content_tag']) ); ?>>
711	<span class="eael-tooltip-text eael-tooltip-<?php echo esc_attr( $settings['eael_tooltip_hover_dir'] ) ?>"><?php echo __( $settings['eael_tooltip_hover_content'] ); ?></span>
712	<?php elseif( $settings['eael_tooltip_type'] === 'icon' ) : ?>
713	<span class="eael-tooltip-content"><?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?><a <?php $this->print_render_attribute_string( 'eael_tooltip_link' ); ?>><?php endif; ?>
714	<?php if ($icon_is_new \|\| $icon_migrated) { ?>
715	<?php if( isset($settings['eael_tooltip_icon_content_new']['value']['url']) ) : ?>
716	<img class="ea-tooltip-svg-trigger" src="<?php echo esc_attr( $settings['eael_tooltip_icon_content_new']['value']['url'] ); ?>" alt="<?php echo esc_attr(get_post_meta($settings['eael_tooltip_icon_content_new']['value']['id'], '_wp_attachment_image_alt', true)); ?>" />
717	<?php else : ?>
718	<i class="<?php echo esc_attr( $settings['eael_tooltip_icon_content_new']['value'] ); ?>"></i>
719	<?php endif; ?>
720	<?php } else { ?>
721	<i class="<?php echo esc_attr( $settings['eael_tooltip_icon_content'] ); ?>"></i>
722	<?php } ?>
723	<?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?></a><?php endif; ?></span>
724	<span class="eael-tooltip-text eael-tooltip-<?php echo esc_attr( $settings['eael_tooltip_hover_dir'] ) ?>"><?php echo __( $settings['eael_tooltip_hover_content'] ); ?></span>
725	<?php elseif( $settings['eael_tooltip_type'] === 'image' ) : ?>
726	<span class="eael-tooltip-content"><?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?><a <?php $this->print_render_attribute_string( 'eael_tooltip_link' ); ?>><?php endif; ?><img src="<?php echo esc_url( $settings['eael_tooltip_img_content']['url'] ); ?>" alt="<?php echo esc_attr( get_post_meta($settings['eael_tooltip_img_content']['id'], '_wp_attachment_image_alt', true) ); ?>"><?php if( $settings['eael_tooltip_enable_link'] === 'yes' ) : ?></a><?php endif; ?></span>
727	<span class="eael-tooltip-text eael-tooltip-<?php echo esc_attr( $settings['eael_tooltip_hover_dir'] ) ?>"><?php echo __( $settings['eael_tooltip_hover_content'] ); ?></span>
728	<?php elseif( $settings['eael_tooltip_type'] === 'shortcode' ) : ?>
729	<div class="eael-tooltip-content"><?php echo do_shortcode( $settings['eael_tooltip_shortcode_content'] ); ?></div>
730	<span class="eael-tooltip-text eael-tooltip-<?php echo esc_attr( $settings['eael_tooltip_hover_dir'] ) ?>"><?php echo __( $settings['eael_tooltip_hover_content'] ); ?></span>
731	<?php endif; ?>
732	</div>
733	<?php
734	}
735
736	protected function content_template() {}
737	}
738