CODEWITHSUNDEEP
javascriptfullcalendartooltipfullcalendar-schedulerpopper.js
Angel Bonet
Angel Bonet

Reputation: 21

Tooltip in fullcalendar scheduler doesn't work

I tried to add tooltips to fullcalendar-scheduler 5.8 but could not achieve this functionality.

In fullcalendar-scheduler template I added the "tooltip" and "popper" libraries and CSS who works with simple fullcalendar but no results. My template starting point was https://fullcalendar.io/docs/event-tooltip-demo

Tooltip template example image

On Javascript code I've used "EventDidMount" function because I understand is the correct and latest way to do it.

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

At other hand, when I try this with standard fullcalendar the tooltips are visible and appear as expected.

It's possible to add tooltips to premium fullcalendar? And if possible, where is my mistake, please?

You can see my example in Codepen...

https://codepen.io/angelbonet/pen/poeMOaW

Upvotes: 1

Views: 2228

Answers (2)

Andy Hilton
Andy Hilton

Reputation: 56

Just wanted to add an update here for the sake of others who come across this.....

Angel states 'Some libraries are not necessaries (like bootstrap)' - however for many (myself included) bootstrap is our site base, so it is necessary for us - and thankfully there is a 2 line workaround for fullcalendar tooltips with bootstrap as outlined here : Tooltips in fullcalendar won't show in combination with bootstrap

Upvotes: 2

Angel Bonet
Angel Bonet

Reputation: 21

I've found the answer by myself and I want share the solution.

Was a mix of mistakes.

Some libraries are not necessaries (like bootstrap)

The tooltip function used is

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

You can see the solution in this example...

Codepen

Upvotes: 1

Related Questions