master-addons / addons / basic / ma-tooltip / ma-tooltip.php

ma-tooltip.php in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits trunk, at addons/basic/ma-tooltip/ma-tooltip.php

873 lines 23.5 KB

Raw Download Zip

1	<?php
2
3	namespace MasterAddons\Addons;
4
5	use MasterAddons\Inc\Classes\Base\Master_Widget;
6	use \Elementor\Utils;
7	use \Elementor\Icons_Manager;
8	use \Elementor\Controls_Manager;
9	use \Elementor\Group_Control_Border;
10	use \Elementor\Group_Control_Typography;
11	use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
12	use \Elementor\Group_Control_Image_Size;
13	use \Elementor\Group_Control_Background;
14	use \Elementor\Group_Control_Box_Shadow;
15
16	use MasterAddons\Inc\Classes\Helper;
17	use MasterAddons\Inc\Admin\Config;
18
19	if (!defined('ABSPATH')) exit; // If this file is called directly, abort.
20
21	class Tooltip extends Master_Widget
22	{
23	use \MasterAddons\Inc\Traits\Widget_Notice;
24	use \MasterAddons\Inc\Traits\Widget_Assets_Trait;
25
26	public function get_name()
27	{
28	return 'ma-tooltip';
29	}
30
31	public function get_title()
32	{
33	return esc_html__('Tooltip', 'master-addons');
34	}
35
36	public function get_icon()
37	{
38	return 'jltma-icon ' . Config::get_addon_icon($this->get_name());
39	}
40
41	public function get_keywords()
42	{
43	return ['tooltip', 'tooltips', 'image tooltips', 'icon tooltip', 'icons', 'hover content', 'content'];
44	}
45
46	protected function register_controls()
47	{
48
49	$this->start_controls_section(
50	'tooltip_button_content',
51	[
52	'label' => __('Content Settings', 'master-addons'),
53	]
54	);
55
56	$this->add_control(
57	'ma_el_tooltip_type',
58	[
59	'label' => esc_html__('Content Type', 'master-addons'),
60	'type' => Controls_Manager::CHOOSE,
61	'label_block' => true,
62	'options' => [
63	'icon' => [
64	'title' => esc_html__('Icon', 'master-addons'),
65	'icon' => 'fa fa-info',
66	],
67	'text' => [
68	'title' => esc_html__('Text', 'master-addons'),
69	'icon' => 'fa fa-text-width',
70	],
71	'image' => [
72	'title' => esc_html__('Image', 'master-addons'),
73	'icon' => 'fa fa-image',
74	],
75	],
76	'default' => 'icon',
77	]
78	);
79
80	$this->add_control(
81	'ma_el_tooltip_content',
82	[
83	'label' => esc_html__('Content', 'master-addons'),
84	'type' => Controls_Manager::TEXTAREA,
85	'label_block' => true,
86	'default' => esc_html__('Hover Me!', 'master-addons'),
87	'sanitize_callback' => 'sanitize_textarea_field',
88	'condition' => [
89	'ma_el_tooltip_type' => ['text']
90	]
91	]
92	);
93
94	$this->add_control(
95	'ma_el_tooltip_icon_content',
96	[
97	'label' => esc_html__('Icon', 'master-addons'),
98	'description' => esc_html__('Please choose an icon from the list.', 'master-addons'),
99	'type' => Controls_Manager::ICONS,
100	'fa4compatibility' => 'icon',
101	'default' => [
102	'value' => 'fas fa-umbrella-beach',
103	'library' => 'solid',
104	],
105	'render_type' => 'template',
106	'condition' => [
107	'ma_el_tooltip_type' => ['icon']
108	]
109	]
110	);
111
112	$this->add_control(
113	'ma_el_tooltip_img_content',
114	[
115	'label' => esc_html__('Image', 'master-addons'),
116	'type' => Controls_Manager::MEDIA,
117	'default' => [
118	'url' => Utils::get_placeholder_image_src(),
119	],
120	'condition' => [
121	'ma_el_tooltip_type' => ['image']
122	]
123	]
124	);
125
126	$this->add_control(
127	'tooltip_button_img',
128	[
129	'label' => __('Image', 'master-addons'),
130	'type' => Controls_Manager::MEDIA,
131	'dynamic' => [
132	'active' => true,
133	],
134	'condition' => [
135	'tooltip_type' => ['image']
136	]
137	]
138	);
139
140	$this->add_group_control(
141	Group_Control_Image_Size::get_type(),
142	[
143	'name' => 'tooltip_button_imgsize',
144	'default' => 'large',
145	'separator' => 'none',
146	'condition' => [
147	'tooltip_type' => ['image']
148	]
149	]
150	);
151
152	$this->add_control(
153	'tooltip_style_section_align',
154	[
155	'label' => __('Alignment', 'master-addons'),
156	'type' => Controls_Manager::CHOOSE,
157	'options' => Helper::jltma_content_alignment(),
158	'default' => 'left',
159	'prefix_class' => 'jltma-align-',
160	]
161	);
162
163	$this->add_control(
164	'jltma_tootltip_tag',
165	[
166	'label' => esc_html__('HTML Tag', 'master-addons'),
167	'type' => Controls_Manager::SELECT,
168	'default' => 'button',
169	'label_block' => false,
170	'render_type' => 'none',
171	'frontend_available' => true,
172	'options' => Helper::jltma_title_tags(),
173	]
174	);
175
176	// $this->add_control(
177	// 'ma_el_tooltip_enable_link',
178	// [
179	// 'label' => __('Show Link', 'master-addons' ),
180	// 'type' => Controls_Manager::SWITCHER,
181	// 'label_on' => __('Show', 'master-addons' ),
182	// 'label_off' => __('Hide', 'master-addons' ),
183	// 'return_value' => 'yes',
184	// 'default' => 'no',
185	// ]
186	// );
187
188	$this->add_control(
189	'ma_el_tooltip_link',
190	[
191	'label' => __('Link', 'master-addons'),
192	'type' => Controls_Manager::URL,
193	'placeholder' => __('https://your-link.com', 'master-addons'),
194	'show_external' => true,
195	'default' => [
196	'url' => '',
197	'is_external' => true,
198	'nofollow' => true,
199	],
200	'condition' => [
201	'jltma_tootltip_tag' => 'a',
202	]
203	]
204	);
205
206	$this->end_controls_section();
207
208	$this->start_controls_section(
209	'tooltip_options',
210	[
211	'label' => __('Tooltip Options', 'master-addons'),
212	]
213	);
214	$this->add_control(
215	'ma_el_tooltip_text',
216	[
217	'label' => esc_html__('Tooltip Text', 'master-addons'),
218	'type' => Controls_Manager::TEXTAREA,
219	'label_block' => true,
220	'default' => esc_html__('Tooltip contents here.', 'master-addons'),
221	'dynamic' => ['active' => true],
222	'render_type' => 'none',
223	'frontend_available' => true,
224	'sanitize_callback' => 'sanitize_textarea_field',
225	]
226	);
227
228	$this->add_control(
229	'jltma_tooltip_follow_cursor',
230	[
231	'label' => esc_html__('Follow Cursor', 'master-addons'),
232	'type' => Controls_Manager::SWITCHER,
233	'render_type' => 'none',
234	'frontend_available' => true
235	]
236	);
237
238	$this->add_control(
239	'ma_el_tooltip_direction',
240	[
241	'label' => esc_html__('Placement', 'master-addons'),
242	'type' => Controls_Manager::SELECT,
243	'default' => '',
244	'label_block' => false,
245	'render_type' => 'none',
246	'frontend_available' => true,
247	'options' => Helper::jltma_tooltip_options(),
248	'condition' => [
249	'jltma_tooltip_follow_cursor' => ''
250	],
251	]
252	);
253
254	$this->add_control(
255	'jltma_tooltip_animation',
256	[
257	'label' => esc_html__('Animation', 'master-addons'),
258	'type' => Controls_Manager::SELECT,
259	'default' => 'shift-away',
260	'options' => Helper::jltma_tooltip_animations(),
261	'render_type' => 'none',
262	'frontend_available' => true
263	]
264	);
265
266	$this->add_control(
267	'jltma_tooltip_trigger',
268	[
269	'label' => esc_html__('Trigger on', 'master-addons'),
270	'type' => Controls_Manager::SELECT,
271	'options' => [
272	'' => esc_html__('Hover', 'master-addons'),
273	'click' => esc_html__('Click', 'master-addons'),
274	'manual' => esc_html__('Custom Trigger', 'master-addons'),
275
276	],
277	'default' => '',
278	'render_type' => 'none',
279	'frontend_available' => true
280	]
281	);
282
283	$this->add_control(
284	'jltma_tooltip_custom_trigger',
285	[
286	'label' => esc_html__('Custom Trigger', 'master-addons'),
287	'placeholder' => '.class-name',
288	'type' => Controls_Manager::TEXT,
289	'dynamic' => ['active' => true],
290	'condition' => [
291	'jltma_tooltip_trigger' => 'manual',
292	],
293	'render_type' => 'none',
294	'frontend_available' => true,
295	]
296	);
297
298	$this->add_control(
299	'jltma_tooltip_duration',
300	[
301	'label' => __('Duration', 'master-addons'),
302	'type' => Controls_Manager::NUMBER,
303	'min' => 100,
304	'max' => 1000,
305	'step' => 10,
306	'default' => 300,
307	'frontend_available' => true,
308	]
309	);
310
311	$this->add_control(
312	'jltma_tooltip_delay',
313	[
314	'label' => __('Delay out (s)', 'master-addons'),
315	'type' => Controls_Manager::NUMBER,
316	'min' => 100,
317	'max' => 1000,
318	'step' => 5,
319	'default' => 300,
320	'frontend_available' => true,
321	]
322	);
323
324	// $this->add_control(
325	// 'ma_el_tooltip_visible_hover',
326	// [
327	// 'label' => __('Visible on Hover', 'master-addons' ),
328	// 'type' => Controls_Manager::SWITCHER,
329	// 'label_on' => __('Yes', 'master-addons' ),
330	// 'label_off' => __('No', 'master-addons' ),
331	// 'return_value' => 'yes',
332	// 'default' => 'no',
333	// 'selectors' => [
334	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-item:hover .jltma-tooltip-text' => 'visibility: visible;opacity: 1; display:block;',
335	// ]
336
337	// ]
338	// );
339
340	$this->add_control(
341	'jltma_tooltip_x_offset',
342	[
343	'label' => esc_html__('X Offset', 'master-addons'),
344	'type' => Controls_Manager::SLIDER,
345	'size_units' => ['px'],
346	'range' => [
347	'px' => [
348	'min' => -1000,
349	'max' => 1000,
350	'step' => 1,
351	],
352	],
353	'render_type' => 'none',
354	'frontend_available' => true
355	]
356	);
357
358	$this->add_control(
359	'jltma_tooltip_y_offset',
360	[
361	'label' => esc_html__('Y Offset', 'master-addons'),
362	'type' => Controls_Manager::SLIDER,
363	'size_units' => ['px'],
364	'range' => [
365	'px' => [
366	'min' => -1000,
367	'max' => 1000,
368	'step' => 1,
369	],
370	],
371	'render_type' => 'none',
372	'frontend_available' => true
373	]
374	);
375
376	// $this->add_control(
377	// 'jltma_tooltip_arrow',
378	// [
379	// 'label' => esc_html__('Arrow', 'master-addons'),
380	// 'type' => Controls_Manager::SWITCHER,
381	// 'render_type' => 'none',
382	// 'frontend_available' => true,
383	// 'condition' => [
384	// 'jltma_tooltip_animation!' => 'fill'
385	// ],
386	// ]
387	// );
388
389	$this->add_control(
390	'jltma_tooltip_arrow_type',
391	[
392	'label' => __('Arrow Type', 'master-addons'),
393	'type' => Controls_Manager::SELECT,
394	'default' => 'sharp',
395	'options' => [
396	'sharp' => __('Sharp', 'master-addons'),
397	'round' => __('Round', 'master-addons'),
398	],
399	'frontend_available' => true,
400	'condition' => [
401	'jltma_tooltip_arrow!' => '',
402	],
403	]
404	);
405
406	$this->end_controls_section();
407
408	// Help Docs section (links from config.php)
409	$this->jltma_help_docs();
410
411	$this->upgrade_to_pro_message();
412
413	// Style tab section
414	$this->start_controls_section(
415	'tooltip_style_section',
416	[
417	'label' => __('General Styles', 'master-addons'),
418	'tab' => Controls_Manager::TAB_STYLE,
419	]
420	);
421
422	$this->add_control(
423	'ma_el_tooltip_content_width',
424	[
425	'label' => __('Content Width', 'master-addons'),
426	'type' => Controls_Manager::SLIDER,
427	'range' => [
428	'px' => [
429	'min' => 0,
430	'max' => 1000,
431	'step' => 5,
432	],
433	'%' => [
434	'min' => 0,
435	'max' => 100,
436	],
437	],
438	'size_units' => ['px', '%'],
439	'default' => [
440	'unit' => 'px',
441	'size' => 150,
442	],
443	'selectors' => [
444	'{{WRAPPER}} .jltma-tooltip' => 'width: {{SIZE}}{{UNIT}};',
445	]
446	]
447	);
448
449	$this->add_control(
450	'ma_el_tooltip_icon_width',
451	[
452	'label' => __('Icon Width', 'master-addons'),
453	'type' => Controls_Manager::SLIDER,
454	'range' => [
455	'px' => [
456	'min' => 0,
457	'max' => 1000,
458	'step' => 5,
459	],
460	'%' => [
461	'min' => 0,
462	'max' => 100,
463	],
464	],
465	'size_units' => ['px', '%'],
466	'default' => [
467	'unit' => 'px',
468	'size' => 30,
469	],
470	'condition' => [
471	'ma_el_tooltip_type' => ['icon']
472	],
473	'selectors' => [
474	'{{WRAPPER}} .jltma-tooltip i' => 'font-size: {{SIZE}}{{UNIT}};',
475	'{{WRAPPER}} .jltma-tooltip svg' => 'width: {{SIZE}}{{UNIT}};',
476	]
477	]
478	);
479
480	$this->add_control(
481	'ma_el_tooltip_content_padding',
482	[
483	'label' => esc_html__('Padding', 'master-addons'),
484	'type' => Controls_Manager::DIMENSIONS,
485	'size_units' => ['px', 'em', '%'],
486	'default' => [
487	'top' => 20,
488	'right' => 20,
489	'bottom' => 20,
490	'left' => 20,
491	'isLinked' => true,
492	],
493	'selectors' => [
494	'{{WRAPPER}} .jltma-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
495	],
496	]
497	);
498
499	$this->start_controls_tabs('ma_el_tooltip_content_style_tabs');
500	// Normal State Tab
501	$this->start_controls_tab('ma_el_tooltip_content_normal', ['label' => esc_html__('Normal', 'master-addons')]);
502	$this->add_control(
503	'ma_el_tooltip_content_bg_color',
504	[
505	'label' => esc_html__('Background Color', 'master-addons'),
506	'type' => Controls_Manager::COLOR,
507	'default' => '#f9f9f9',
508	'selectors' => [
509	'{{WRAPPER}} .jltma-tooltip' => 'background: {{VALUE}};',
510	],
511	]
512	);
513	$this->add_control(
514	'ma_el_tooltip_content_color',
515	[
516	'label' => esc_html__('Text Color', 'master-addons'),
517	'type' => Controls_Manager::COLOR,
518	'default' => '#826EFF',
519	'selectors' => [
520	'{{WRAPPER}} .jltma-tooltip, {{WRAPPER}} .jltma-tooltip a'
521	=> 'color: {{VALUE}};',
522	],
523	]
524	);
525
526	$this->add_group_control(
527	Group_Control_Box_Shadow::get_type(),
528	[
529	'name' => 'ma_el_tooltip_content_shadow',
530	'selector' => '{{WRAPPER}} .jltma-tooltip',
531	]
532	);
533
534	$this->end_controls_tab();
535
536	// Hover State Tab
537	$this->start_controls_tab('ma_el_tooltip_content_hover', ['label' => esc_html__('Hover', 'master-addons')]);
538	$this->add_control(
539	'ma_el_tooltip_content_hover_bg_color',
540	[
541	'label' => esc_html__('Background Color', 'master-addons'),
542	'type' => Controls_Manager::COLOR,
543	'default' => '#f9f9f9',
544	'selectors' => [
545	'{{WRAPPER}} .jltma-tooltip:hover' => 'background: {{VALUE}};',
546	],
547	]
548	);
549	$this->add_control(
550	'ma_el_tooltip_content_hover_color',
551	[
552	'label' => esc_html__('Text Color', 'master-addons'),
553	'type' => Controls_Manager::COLOR,
554	'default' => '#212121',
555	'selectors' => [
556	'{{WRAPPER}} .jltma-tooltip:hover' => 'color: {{VALUE}};',
557	'{{WRAPPER}} .jltma-tooltip a:hover' => 'color: {{VALUE}};',
558	],
559	]
560	);
561
562	$this->add_group_control(
563	Group_Control_Box_Shadow::get_type(),
564	[
565	'name' => 'ma_el_tooltip_hover_shadow',
566	'selector' => '{{WRAPPER}} .jltma-tooltip:hover',
567	]
568	);
569
570	$this->end_controls_tab();
571	$this->end_controls_tabs();
572
573	$this->add_control(
574	'ma_el_shadow-separator',
575	[
576	'type' => Controls_Manager::DIVIDER,
577	]
578	);
579
580	$this->add_group_control(
581	Group_Control_Typography::get_type(),
582	[
583	'name' => 'ma_el_tooltip_content_typography',
584	'selector' => '{{WRAPPER}} .jltma-tooltip',
585	]
586	);
587
588	$this->add_group_control(
589	Group_Control_Border::get_type(),
590	[
591	'name' => 'ma_el_tooltip_hover_border',
592	'label' => esc_html__('Border', 'master-addons'),
593	'selector' => '{{WRAPPER}} .jltma-tooltip',
594	]
595	);
596
597	$this->add_control(
598	'ma_el_tooltip_content_radius',
599	[
600	'label' => esc_html__('Border Radius', 'master-addons'),
601	'type' => Controls_Manager::DIMENSIONS,
602	'size_units' => ['px', 'em', '%'],
603	'default' => [
604	'top' => 4,
605	'right' => 4,
606	'bottom' => 4,
607	'left' => 4,
608	'isLinked' => true,
609	],
610	'selectors' => [
611	'{{WRAPPER}} .jltma-tooltip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612	],
613	]
614	);
615
616	$this->end_controls_section();
617
618	// Tooltip Style tab section
619	$this->start_controls_section(
620	'ma_el_tooltip_style_section',
621	[
622	'label' => __('Tooltip Styles', 'master-addons'),
623	'tab' => Controls_Manager::TAB_STYLE,
624	]
625	);
626
627	$this->add_control(
628	'ma_el_tooltip_text_width',
629	[
630	'label' => __('Tooltip Width', 'master-addons'),
631	'type' => Controls_Manager::SLIDER,
632	'size_units' => ['px', 'em'],
633	'range' => [
634	'px' => [
635	'min' => 50,
636	'max' => 1000,
637	'step' => 5,
638	],
639	'em' => [
640	'min' => 0,
641	'max' => 100,
642	],
643	],
644	'default' => [
645	'unit' => 'px',
646	'size' => 200,
647	],
648	'label_block' => true,
649	'selectors' => [
650	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]' => 'max-width: {{SIZE}}{{UNIT}} !important;',
651	]
652	]
653	);
654
655	$this->add_control(
656	'ma_el_tooltip_bg_color',
657	[
658	'label' => __('Background Color', 'master-addons'),
659	'type' => Controls_Manager::COLOR,
660	'default' => '#826EFF',
661	'selectors' => [
662	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]' => 'background-color: {{VALUE}};',
663	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"][data-placement^="top"] .tippy-arrow::before' => 'border-top-color: {{VALUE}};',
664	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"][data-placement^="bottom"] .tippy-arrow::before' => 'border-bottom-color: {{VALUE}};',
665	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"][data-placement^="left"] .tippy-arrow::before' => 'border-left-color: {{VALUE}};',
666	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"][data-placement^="right"] .tippy-arrow::before' => 'border-right-color: {{VALUE}};',
667	],
668	]
669	);
670
671	$this->add_control(
672	'ma_el_tooltip_style_color',
673	[
674	'label' => __('Text Color', 'master-addons'),
675	'type' => Controls_Manager::COLOR,
676	'default' => '#ffffff',
677	'selectors' => [
678	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]' => 'color: {{VALUE}};',
679	],
680	]
681	);
682
683	// $this->add_group_control(
684	// Group_Control_Background::get_type(),
685	// [
686	// 'name' => 'hover_tooltip_content_background',
687	// 'label' => __('Background', 'master-addons' ),
688	// 'types' => ['classic', 'gradient'],
689	// 'selector' => '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text',
690	// ]
691	// );
692
693	// Arrow Tab Start
694	// $this->add_control(
695	// 'ma_el_tooltip_arrow_color',
696	// [
697	// 'label' => __('Arrow Color', 'master-addons'),
698	// 'type' => Controls_Manager::COLOR,
699	// 'default' => '#826EFF',
700	// 'selectors' => [
701	// '{{WRAPPER}} .tippy-box .tippy-arrow' => 'color: {{VALUE}}',
702	// ],
703	// ]
704	// );
705
706	$this->add_group_control(
707	Group_Control_Typography::get_type(),
708	[
709	'name' => 'hover_tooltip_content_typography',
710	'global' => [
711	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
712	],
713	'selector' => '.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]',
714	]
715	);
716
717	$this->add_control(
718	'ma_el_tooltip_text_padding',
719	[
720	'label' => __('Padding', 'master-addons'),
721	'type' => Controls_Manager::DIMENSIONS,
722	'size_units' => ['px', '%', 'em'],
723	'default' => [
724	'top' => 10,
725	'right' => 10,
726	'bottom' => 10,
727	'left' => 10,
728	'isLinked' => true,
729	],
730	'selectors' => [
731	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"] .tippy-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
732	],
733	'separator' => 'before',
734	]
735	);
736
737	$this->add_group_control(
738	Group_Control_Border::get_type(),
739	[
740	'name' => 'jltma_tooltip_border',
741	'label' => esc_html__('Border', 'master-addons'),
742	'placeholder' => '1px',
743	'default' => '1px',
744	'selector' => '.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]',
745	]
746	);
747
748	$this->add_responsive_control(
749	'ma_el_tooltip_content_border_radius',
750	[
751	'label' => esc_html__('Border Radius', 'master-addons'),
752	'type' => Controls_Manager::DIMENSIONS,
753	'size_units' => ['px', '%'],
754	'selectors' => [
755	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
756	],
757	]
758	);
759
760	$this->add_control(
761	'jltma_tooltip_distance',
762	[
763	'label' => __('Distance', 'master-addons'),
764	'type' => Controls_Manager::NUMBER,
765	'min' => 05,
766	'max' => 50,
767	'step' => 2,
768	'default' => 10,
769	'label_block' => false,
770	'frontend_available' => true,
771	]
772	);
773
774	$this->add_control(
775	'jltma_tooltip_text_align',
776	[
777	'label' => esc_html__('Text Alignment', 'master-addons'),
778	'type' => Controls_Manager::CHOOSE,
779	'default' => 'center',
780	'options' => [
781	'left' => [
782	'title' => esc_html__('Left', 'master-addons'),
783	'icon' => 'eicon-text-align-left',
784	],
785	'center' => [
786	'title' => esc_html__('Center', 'master-addons'),
787	'icon' => 'eicon-text-align-center',
788	],
789	'right' => [
790	'title' => esc_html__('Right', 'master-addons'),
791	'icon' => 'eicon-text-align-right',
792	],
793	],
794	'selectors' => [
795	'.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]' => 'text-align: {{VALUE}};',
796	],
797	'separator' => 'before',
798	]
799	);
800
801	$this->add_group_control(
802	Group_Control_Box_Shadow::get_type(),
803	[
804	'name' => 'jltma_tooltip_box_shadow',
805	'selector' => '.tippy-box[data-theme~="jltma-tooltip-tippy-{{ID}}"]',
806	]
807	);
808
809	$this->end_controls_section();
810	}
811
812	protected function render()
813	{
814	$settings = $this->get_settings_for_display();
815
816	// Ensure dependencies are loaded
817	wp_enqueue_script('jltma-popper');
818	wp_enqueue_script('jltma-tippy');
819	wp_enqueue_style('jltma-tippy');
820
821	$align = $settings['tooltip_style_section_align'];
822	$this->add_render_attribute(
823	'jltma_tooltip_wrapper',
824	[
825	'class' => ['jltma-tooltip', 'jltma-align-' . esc_attr( $align ) ],
826	'id' => 'jltma-tooltip-' . $this->get_id(),
827	]
828	);
829
830	$this->add_inline_editing_attributes('ma_el_tooltip_content', 'basic');
831
832	// If link type tags
833	if (!empty($settings['ma_el_tooltip_link']['url'])) {
834	$this->add_render_attribute('jltma_tooltip_wrapper', [
835	'href' => esc_url_raw($settings['ma_el_tooltip_link']['url']),
836	]);
837	if ($settings['ma_el_tooltip_link']['is_external']) {
838	$this->add_render_attribute('jltma_tooltip_wrapper', 'target', '_blank');
839	}
840
841	if ($settings['ma_el_tooltip_link']['nofollow']) {
842	$this->add_render_attribute('jltma_tooltip_wrapper', 'rel', 'nofollow');
843	}
844	}
845
846	$this->add_render_attribute('jltma_tooltips', 'class', 'jltma-tooltip-item');
847
848	// Whitelist allowed HTML tags to prevent XSS
849	$allowed_tags = ['button', 'a', 'span', 'div', 'p'];
850	$jltma_tootltip_tag = (!empty($settings['jltma_tootltip_tag']) && in_array($settings['jltma_tootltip_tag'], $allowed_tags, true))
851	? $settings['jltma_tootltip_tag']
852	: 'button';
853	?>
854	<<?php echo esc_html($jltma_tootltip_tag); ?> <?php echo $this->get_render_attribute_string('jltma_tooltip_wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
855	<?php if ($settings['ma_el_tooltip_type'] === 'text') { ?>
856	<?php echo wp_kses_post( $this->parse_text_editor(Helper::wp_kses_custom($settings['ma_el_tooltip_content'])) ); ?>
857	<?php } elseif ($settings['ma_el_tooltip_type'] === 'icon') {
858	$migrated = isset($settings['__fa4_migrated']['ma_el_tooltip_icon_content']);
859	$is_new = empty($settings['icon']) && Icons_Manager::is_migration_allowed();
860	if ($is_new \|\| $migrated) {
861	Icons_Manager::render_icon($settings['ma_el_tooltip_icon_content'], ['aria-hidden' => 'true']);
862	} else { ?>
863	<i class="<?php echo esc_attr($settings['icon']); ?>" aria-hidden="true"></i>
864	<?php }
865	} elseif ($settings['ma_el_tooltip_type'] === 'image') { ?>
866	<img src="<?php echo esc_url($settings['ma_el_tooltip_img_content']['url']); ?>">
867	<?php } ?>
868	</<?php echo esc_html($jltma_tootltip_tag); ?>>
869	<?php
870
871	}
872	}
873