Tooltips not working in fullcalendar when i use bootstrap css

user_7617022 0
Viewed 8111

I'm trying to show tooltips in my fullcalendar app. But if i include bootstrap.css it isn't working. When i run code without it, everything is working.

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'My Event',
      start: '2010-01-01',
      description: 'This is a cool event'
    }
    // more events here
  ],
  eventRender: function(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }
});

with this example code from Fullcalendar.io page and bootstrap.min.css is excluded everything is working.

edit: I forgot to add that i'm using also mdboostrap.css

Edit: Link to Codepen showing the issue: https://codepen.io/anon/pen/WqKvYv. If you delete twitter-bootstrap from CSS options tooltip is showing

mdbootstrap fullcalendar-4 bootstrap-4 fullcalendar jquery
1 Answers

This happens because Bootstrap's CSS includes rules relating to .tooltip. So there's a conflict between those CSS rules and the ones you've included for tooltip.js.

But bootstrap includes its own tooltip functionality which is also based on popper.js ....so if you're already using Bootstrap then you don't need tooltip.js on top, just use the Bootstrap ones.

Ensure you include

popper.min.js
bootstrap.min.js

in that order, and for CSS, remove your custom tooltip CSS and just include

bootstrap.min.css

in your page.

In the code, you can use all the same options for a Bootstrap tooltip as for tooltip.js (since they're both based on popper.js):

eventRender: function(info) {
  $(info.el).tooltip({ 
    title: info.event.extendedProps.description,
    placement: "top",
    trigger: "hover",
    container: "body"
  });
},

Live demo: https://codepen.io/ADyson82/pen/bPjgow

user_59470430
Related