Всплывающие подсказки не работают в fullcalendar, когда я использую загрузчик CSS - PullRequest
Новая
       17

Всплывающие подсказки не работают в fullcalendar, когда я использую загрузчик CSS

0 голосов
/ 03 июля 2019

Я пытаюсь показать всплывающие подсказки в приложении fullcalendar.Но если я включу bootstrap.css, он не работает.Когда я запускаю код без него, все работает. 

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

с этим примером кода со страницы Fullcalendar.io и bootstrap.min.css исключено, все работает.

edit: Iзабыл добавить, что я использую также mdboostrap.css

Редактировать: ссылка на Codepen, показывающая проблему: https://codepen.io/anon/pen/WqKvYv. Если вы удалите twitter-bootstrap из CSS-опций, всплывающая подсказка показывает

1 Ответ

1 голос
/ 04 июля 2019

Это происходит потому, что CSS в Bootstrap содержит правила, относящиеся к .tooltip.Таким образом, существует конфликт между этими правилами CSS и теми, которые вы включили для tooltip.js.

Но загрузчик включает свою собственную функцию всплывающей подсказки , которая также основана на popper.js .... так что, если вы уже используете Bootstrap, вам не нужен tooltip.js сверхупросто используйте Bootstrap.

Убедитесь, что вы включили 

popper.min.js
bootstrap.min.js

в указанном порядке, а для CSS удалите пользовательскую подсказку CSS и просто включите 

bootstrap.min.css

на вашей странице.

В коде вы можете использовать все те же параметры для всплывающей подсказки Bootstrap, что и для tooltip.js (поскольку они оба основаны на popper.js): 

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

Демо: https://codepen.io/ADyson82/pen/bPjgow

...