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

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

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

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

Tooltip.php

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