3

I am trying to get a popover to show on hover. It is working in all browsers except Safari. Absolutely nothing happens in Safari. I'm not sure what I am doing wrong.

Here is my html:

<div class="my-class" data-toggle="popover">
    ...
</div>

Here is the html that is listening for the popover:

$(function () {

$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    placement: 'top',
    html: true,
    title: function () {
        return $('.qtip .title', $(this)).html();
    },
    content: function () {
        return $('.qtip .content', $(this)).html();
    }
});  

});

Safari isn't seeing the hover at all in the console. I'm not sure if I've missed an obvious step or what I've done incorrectly. Thank you for any suggestions!

EDIT

I am using this on the same page and it is working in all browsers.

$('[data-toggle="collapse"]').click(function (event) {
     ...
});
Damon
  • 4,151
  • 13
  • 52
  • 108
  • This link might help you: https://github.com/angular-ui/bootstrap/issues/3687 – Aniket G Mar 10 '19 at 22:22
  • Thanks Aniket - it seems like that is all angular-ui/angular bootstrap. I'm running straight jQuery + BS. Is there a spot in that page in particular that you think can help? – Damon Mar 10 '19 at 22:31

1 Answers1

1

It is important to understand the difference between bootstrap.bundle.min.js and bootstrap.min.js

bootstrap.bundle.js which contains Popper.js in order for popovers to work!

If you include the popper and other libraries (for whatever reasons) in addition to the bootstrap.bundle.min.js file, Safari and Edge will complain. At that point they throw a generic error up the chain and js just gives up -- causing the popover to not work.

Hope this helps someone else!

Damon
  • 4,151
  • 13
  • 52
  • 108