5

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

ADyson
  • 57,178
  • 14
  • 51
  • 63
tomas
  • 121
  • 1
  • 2
  • 11
  • 1
    Most likely there's a conflict in the CSS rules. Which tooltip library are you using? If you check the DOM with the dev tools inspector you'll be able to see which rules are causing the problem and remove/amend them – Rory McCrossan Jul 03 '19 at 08:40
  • i'm using popper.min.js and tooltip.min.js both download from popper.js.org. Dev tool shows nothing. – tomas Jul 03 '19 at 08:44
  • I agree with @RoryMcCrossan There can be conflicts with CSS files – Coder Jul 03 '19 at 08:50
  • but which one, because in inspector tool is nothing – tomas Jul 03 '19 at 08:56
  • 1
    "not working" means what? Nothing is displayed? Or the display is incorrect somehow? Please create us a [minimal, reproducible example](https://stackoverflow.com/help/mcve) so that we can try and trace it. – ADyson Jul 03 '19 at 10:09
  • here is example [link](https://codepen.io/anon/pen/WqKvYv) - tooltip is not showing. If you delete twitter-bootstrap from CSS options tooltip is showing – tomas Jul 04 '19 at 09:28
  • i found solution here: https://stackoverflow.com/questions/55773470/bootstrap-css-breaks-tooltip-popover – tomas Jul 04 '19 at 13:11
  • thank you @ADyson your solution is working :) – tomas Jul 04 '19 at 13:16
  • Where does the element ````new Tooltip``` come from? – SkogensKonung Jan 07 '21 at 13:37

1 Answers1

12

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

ADyson
  • 57,178
  • 14
  • 51
  • 63