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

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

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

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

Tooltip.php

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