CODEWITHSUNDEEP
javascriptfullcalendartooltippopper.js
Aurele Collinet
Aurele Collinet

Reputation: 138

Trying to get a tooltip shown in eventRender from the fullcalendar documentation

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
);

Upvotes: 3

Views: 3133

Answers (2)

Jay Kariesch
Jay Kariesch

Reputation: 1482

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.

Upvotes: 7

Aurele Collinet
Aurele Collinet

Reputation: 138

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)

Upvotes: 1

Related Questions