Tooltip error with modal edit page

PHPMaker General Discussion (PHPMaker)
1

Hi all:I’m having some issues integrating fullcalendar with a modal edit dialog.I have a custom file (including common files) showing a calendar (fullcalendar.io) and it shows a tooltip when you go over the events. I had to add the popper and tooltip references to get it work.
When I click on a event, I show a modal edit page, with some “selects”. My problem is, when I click in the dropdowns, or click in a calendar icon, they don’t open, and I get an error in console: “Uncaught TypeError: Popper.createPopper is not a function”
I’ve seen the dropdowns use popper too, so must some kind of incompatiblity with my includes
I’ve tried removing the popper and tooltip lines (I think with the project files, they should work, but I get an error of tooltip not defined if I don’t add them)Some ideas?Thanks¡¡

namespace PHPMaker2022\semicom;

// Page object
$PlanificacionCal = &$Page;
?>
<?php
$Page->showMessage();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8' />
<script src='phpjs/main.js'></script>
<link href='phpjs/main.css' rel='stylesheet' />
<script src='phpjs/locales/es.js'></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
<style>
...
</style>
....
....
		var tooltip = new Tooltip(info.el, {
		  title: info.event.extendedProps.description,
		  placement: 'top',
		  trigger: 'hover',
		  container: 'body'
		});
2
  1. If you use Include common files, there is no need to include Popper again.
  2. You should run your code after Popper is loaded, e.g.
loadjs.ready("popper", () => {
// your code
});
3

Thanks (as always) for your answer. I assumed it was something like this but I didn’t know how to wait for it.
I’ve been trying to write your code in several places, but with no success (probably something with DOMContentLoaded that seems it waits too for something.

<script>
'Here I've tried
document.addEventListener('DOMContentLoaded', function() {
	var calendarEl = document.getElementById('calendar');
	var calendar = new FullCalendar.Calendar(calendarEl, {
		InitialView: 'dayGridWeek',
		eventDidMount: function(info) {
		        'Here I've tried
			var tooltip = new Tooltip(info.el, {
				title: info.event.extendedProps.description,
			        placement: 'top',
				trigger: 'hover',
				container: 'body'
				});
			},

		});
	});
</script>

By the way, if I add too the fullcalendar with composer, how do I load instead of:

<script src='phpjs/main.js'></script>
<link href='phpjs/main.css' rel='stylesheet' />
<script src='phpjs/locales/es.js'></script>
4

arbei wrote:

You should run your code after Popper is loaded, e.g.

loadjs.ready(“popper”, () => {
// your code
});

>

See examples for Page_Head [server event](https://phpmaker.dev/docs/#/customscripts.html?id=global-all-pages) for more information. Since it is a Custom File, you may put the script in your file content directly (inside <script> tag of course).