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 3.1.0, at addons/basic/ma-tooltip/ma-tooltip.php

884 lines 24.2 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	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text' => 'width: {{SIZE}}{{UNIT}};',
651	'{{WRAPPER}} .tippy-box' => 'max-width: calc({{SIZE}}{{UNIT}} - 10px) !important;',
652	]
653	]
654	);
655
656	$this->add_control(
657	Group_Control_Background::get_type(),
658	[
659	'name' => 'ma_el_tooltip_bg_color',
660	'label' => __('Background Color', 'master-addons'),
661	'type' => Controls_Manager::COLOR,
662	'default' => '#826EFF',
663	// 'selectors' => [
664	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-item .jltma-tooltip-text' => 'background: {{VALUE}};'
665	// ],
666	'selector' => [
667	'{{WRAPPER}} .tippy-box' => 'background-color: {{VALUE}}',
668	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"] .tippy-tooltip, .tippy-popper[data-tippy-popper-id="{{ID}}"] .tippy-tooltip .tippy-backdrop' => 'background-color: {{VALUE}};',
669	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"][x-placement^=top] .tippy-tooltip .tippy-arrow' => 'border-top-color: {{VALUE}};',
670	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"][x-placement^=bottom] .tippy-tooltip .tippy-arrow' => 'border-bottom-color: {{VALUE}};',
671	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"][x-placement^=left] .tippy-tooltip .tippy-arrow' => 'border-left-color: {{VALUE}};',
672	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"][x-placement^=right] .tippy-tooltip .tippy-arrow' => 'border-right-color: {{VALUE}};',
673	// '{{WRAPPER}} .tippy-popper[data-tippy-popper-id="{{ID}}"] .tippy-tooltip .tippy-roundarrow' => 'fill: {{VALUE}};',
674	]
675	]
676	);
677
678	$this->add_control(
679	'ma_el_tooltip_style_color',
680	[
681	'label' => __('Text Color', 'master-addons'),
682	'type' => Controls_Manager::COLOR,
683	'default' => '#ffffff',
684	'selectors' => [
685	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-item .jltma-tooltip-text' => 'color: {{VALUE}};',
686	'{{WRAPPER}} .tippy-box' => 'color: {{VALUE}}',
687	],
688	]
689	);
690
691	// $this->add_group_control(
692	// Group_Control_Background::get_type(),
693	// [
694	// 'name' => 'hover_tooltip_content_background',
695	// 'label' => __('Background', 'master-addons' ),
696	// 'types' => ['classic', 'gradient'],
697	// 'selector' => '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text',
698	// ]
699	// );
700
701	// Arrow Tab Start
702	// $this->add_control(
703	// 'ma_el_tooltip_arrow_color',
704	// [
705	// 'label' => __('Arrow Color', 'master-addons'),
706	// 'type' => Controls_Manager::COLOR,
707	// 'default' => '#826EFF',
708	// 'selectors' => [
709	// '{{WRAPPER}} .tippy-box .tippy-arrow' => 'color: {{VALUE}}',
710	// ],
711	// ]
712	// );
713
714	$this->add_group_control(
715	Group_Control_Typography::get_type(),
716	[
717	'name' => 'hover_tooltip_content_typography',
718	'global' => [
719	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
720	],
721	// 'selector' => '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text',
722	'selector' => '.tippy-box',
723	]
724	);
725
726	$this->add_control(
727	'ma_el_tooltip_text_padding',
728	[
729	'label' => __('Padding', 'master-addons'),
730	'type' => Controls_Manager::DIMENSIONS,
731	'size_units' => ['px', '%', 'em'],
732	'default' => [
733	'top' => 10,
734	'right' => 10,
735	'bottom' => 10,
736	'left' => 10,
737	'isLinked' => true,
738	],
739	'selectors' => [
740	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
741	'{{WRAPPER}} .tippy-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
742	],
743	'separator' => 'before',
744	]
745	);
746
747	$this->add_group_control(
748	Group_Control_Border::get_type(),
749	[
750	'name' => 'jltma_tooltip_border',
751	'label' => esc_html__('Border', 'master-addons'),
752	'placeholder' => '1px',
753	'default' => '1px',
754	'selector' => '{{WRAPPER}} .tippy-box',
755	]
756	);
757
758	$this->add_responsive_control(
759	'ma_el_tooltip_content_border_radius',
760	[
761	'label' => esc_html__('Border Radius', 'master-addons'),
762	'type' => Controls_Manager::DIMENSIONS,
763	'size_units' => ['px', '%'],
764	'selectors' => [
765	// '{{WRAPPER}} .jltma-tooltip .jltma-tooltip-text' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px !important;',
766	'{{WRAPPER}} .tippy-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
767	],
768	]
769	);
770
771	$this->add_control(
772	'jltma_tooltip_distance',
773	[
774	'label' => __('Distance', 'master-addons'),
775	'type' => Controls_Manager::NUMBER,
776	'min' => 05,
777	'max' => 50,
778	'step' => 2,
779	'default' => 10,
780	'label_block' => false,
781	'frontend_available' => true,
782	]
783	);
784
785	$this->add_control(
786	'jltma_tooltip_text_align',
787	[
788	'label' => esc_html__('Text Alignment', 'master-addons'),
789	'type' => Controls_Manager::CHOOSE,
790	'default' => 'center',
791	'options' => [
792	'left' => [
793	'title' => esc_html__('Left', 'master-addons'),
794	'icon' => 'eicon-text-align-left',
795	],
796	'center' => [
797	'title' => esc_html__('Center', 'master-addons'),
798	'icon' => 'eicon-text-align-center',
799	],
800	'right' => [
801	'title' => esc_html__('Right', 'master-addons'),
802	'icon' => 'eicon-text-align-right',
803	],
804	],
805	'selectors' => [
806	'{{WRAPPER}} .tippy-box' => 'text-align: {{VALUE}};',
807	],
808	'separator' => 'before',
809	]
810	);
811
812	$this->add_group_control(
813	Group_Control_Box_Shadow::get_type(),
814	[
815	'name' => 'jltma_tooltip_box_shadow',
816	'selector' => '.tippy-box',
817	]
818	);
819
820	$this->end_controls_section();
821	}
822
823	protected function render()
824	{
825	$settings = $this->get_settings_for_display();
826
827	// Ensure dependencies are loaded
828	wp_enqueue_script('jltma-popper');
829	wp_enqueue_script('jltma-tippy');
830	wp_enqueue_style('jltma-tippy');
831
832	$align = $settings['tooltip_style_section_align'];
833	$this->add_render_attribute(
834	'jltma_tooltip_wrapper',
835	[
836	'class' => ['jltma-tooltip', 'jltma-align-' . esc_attr( $align ) ],
837	'id' => 'jltma-tooltip-' . $this->get_id(),
838	]
839	);
840
841	$this->add_inline_editing_attributes('ma_el_tooltip_content', 'basic');
842
843	// If link type tags
844	if (!empty($settings['ma_el_tooltip_link']['url'])) {
845	$this->add_render_attribute('jltma_tooltip_wrapper', [
846	'href' => esc_url_raw($settings['ma_el_tooltip_link']['url']),
847	]);
848	if ($settings['ma_el_tooltip_link']['is_external']) {
849	$this->add_render_attribute('jltma_tooltip_wrapper', 'target', '_blank');
850	}
851
852	if ($settings['ma_el_tooltip_link']['nofollow']) {
853	$this->add_render_attribute('jltma_tooltip_wrapper', 'rel', 'nofollow');
854	}
855	}
856
857	$this->add_render_attribute('jltma_tooltips', 'class', 'jltma-tooltip-item');
858
859	// Whitelist allowed HTML tags to prevent XSS
860	$allowed_tags = ['button', 'a', 'span', 'div', 'p'];
861	$jltma_tootltip_tag = (!empty($settings['jltma_tootltip_tag']) && in_array($settings['jltma_tootltip_tag'], $allowed_tags, true))
862	? $settings['jltma_tootltip_tag']
863	: 'button';
864	?>
865	<<?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 ?>>
866	<?php if ($settings['ma_el_tooltip_type'] === 'text') { ?>
867	<?php echo wp_kses_post( $this->parse_text_editor(Helper::wp_kses_custom($settings['ma_el_tooltip_content'])) ); ?>
868	<?php } elseif ($settings['ma_el_tooltip_type'] === 'icon') {
869	$migrated = isset($settings['__fa4_migrated']['ma_el_tooltip_icon_content']);
870	$is_new = empty($settings['icon']) && Icons_Manager::is_migration_allowed();
871	if ($is_new \|\| $migrated) {
872	Icons_Manager::render_icon($settings['ma_el_tooltip_icon_content'], ['aria-hidden' => 'true']);
873	} else { ?>
874	<i class="<?php echo esc_attr($settings['icon']); ?>" aria-hidden="true"></i>
875	<?php }
876	} elseif ($settings['ma_el_tooltip_type'] === 'image') { ?>
877	<img src="<?php echo esc_url($settings['ma_el_tooltip_img_content']['url']); ?>">
878	<?php } ?>
879	</<?php echo esc_html($jltma_tootltip_tag); ?>>
880	<?php
881
882	}
883	}
884