Bootstrap CSS breaks tooltip popover

问题:

The event tooltip event render works fine until i add a bootstrap css

Working site

https://fullcalendar.io/docs/event-tooltip-demo

When i add the following to the css

 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

It breaks the tootips from being displayed.

Here is the same demo on codepen with the css added to it

https://codepen.io/ryan-ramsumair/pen/GLGpwQ?editors=0110

How can i remedy this ?

回答1:

Changing :

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

To:

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

Works with bootstrap 4. Hope i saved someone the headache