Im working on a fullCalendar overview interface Using: Flask-python on server and html jinja2 js on client side.

Right now i am trying to create a tooltip on hover or click using tooltip.js.

I have a bug that drives me to the popper.js index.

here is my basic js:

 document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid'],
            defaultView: 'dayGridMonth',

            eventRender: function(info) {
             var tooltip = new Tooltip(info.el, {
                    title: "info.event.extendedProps.description",
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                  });
        },
        events: {{hour}}           

    });

    calendar.render();

  });

From what i saw, le eventRender is called, if i mouseover the tooltip div is created BUT i got this error:

Uncaught TypeError: a is not a constructor
at g.value (index.js:246)
at index.js:381

which is referencing this:

this.popperInstance = new Popper(
  reference,
  tooltipNode,
  this._popperOptions
);

Im working on a fullCalendar overview interface Using: Flask-python on server and html jinja2 js on client side.

Right now i am trying to create a tooltip on hover or click using tooltip.js.

I have a bug that drives me to the popper.js index.

here is my basic js:

 document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid'],
            defaultView: 'dayGridMonth',

            eventRender: function(info) {
             var tooltip = new Tooltip(info.el, {
                    title: "info.event.extendedProps.description",
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                  });
        },
        events: {{hour}}           

    });

    calendar.render();

  });

From what i saw, le eventRender is called, if i mouseover the tooltip div is created BUT i got this error:

Uncaught TypeError: a is not a constructor
at g.value (index.js:246)
at index.js:381

which is referencing this:

this.popperInstance = new Popper(
  reference,
  tooltipNode,
  this._popperOptions
);

• javascript
• fullcalendar
• tooltip
• popper.js

• 1 I just came across the same error in the same way and my search results found this thread. If I figure this out, I'll let you know. Else, keep me posted too. – chris.cavage Commented Apr 30, 2019 at 15:22
• You can see a working version using tooltip.js here: codepen.io/anon/pen/ZZdgMb?&editable=true&editors=001 . There is a link to it already from the fullCalendar documented at fullcalendar.io/docs/eventRender . This version does not produce the error. I suggest you pare it to your version (both the code itself, and the libraries you're loading, and their version numbers) and ensure you haven't missed anything important. – ADyson Commented May 2, 2019 at 11:01

2 Answers 2

In case someone else runs into this -- if you're not using Bootstrap, it's likely due to the order in which you're loading Popper and Tooltip.

Popper.js is a dependency of Tooltip.js, so it has to be loaded before Tooltip.js. a is not a constructor because a is undefined, and if you look at the source code, a represents Popper.

My problem was a import conflict between boostrap and popper js, to resolve it i change the framework i am using materialize to avoid the problem as i couldn't get it working with boostrap js (i think boostrap has his own tooltip and popper function that might have been the problem)