Popover not working

[bruno19]

Hi there
I used the popover and now it just doesn’t pop up anymore.
Is there a conflict in script, @PaulOB ?

This is the html:

<a href="#0" tabindex="0" role="button" class="popovers color-main-link" data-toggle="popover" data-trigger="focus" title="" data-content="text goes here" data-original-title="lovely header">lovely header</a>

This is the js:

    $(function() {
      $('[data-toggle="popover"]').popover();
    });
    $("[data-toggle=popover]")
      .popover({
        html: true
      });

I am using Bootstrap v4.1.2 CSS and Bootstrap v5.0.0 JS.

[rpg_digital]

Hi @bruno19,

Only had time to have a quick look, and this is very much trial and error.

First off you need to include ‘bs’ in your data attributes. I think this was an issue previously.

<a href="#0" 
  tabindex="0" 
  role="button" 
  class="popovers color-main-link" 
  title="" 
  data-bs-toggle="popover" 
  data-bs-trigger="focus" 
  data-bs-content="text goes here" 
  data-bs-original-title="lovely header"
>lovely header</a>

Second, I haven’t used jquery in my test, but copied the vanilla JS code from the Bootstrap site here

This seems to work

I do wonder if it is a good idea to use different versions of Bootstrap for your css and js?

[PaulOB]

@rpg_digital

I do wonder if it is a good idea to use different versions of Bootstrap for your css and js?

No its a very bad idea

Don’t mix versions, You can usually upgrade to a later version of the same number (e.g. 4.x etc) but never between V4 and v5 as they are too different and indeed even if you get it work you are then running two frameworks (or more) instead of one.

[bruno19]

Strangely enough it all worked fine, and now it doesn’t.
I checked if it had to do with the other issue of missing a bracket in the vendor.css, but it doesn’t. So very annoying that I would have to start all over again on the bootstrap css.

Is there a cause you see why

<a href="#0" tabindex="0" role="button" class="popovers color-main-link" data-toggle="popover" data-trigger="focus" title="" data-content="text goes here" data-original-title="lovely header">lovely header</a>

    $(function() {
      $('[data-toggle="popover"]').popover();
    });
    $("[data-toggle=popover]")
      .popover({
        html: true
      });

does not work anymore?

I noticed that, if I change this code to (.popovers instead of .popover)

    $(function() {
      $('[data-toggle="popover"]').popover();
    });
    $("[data-toggle=popover]")
      **.popovers({**
        html: true
      });

the slider on the homepage (OwlCaroussel) does not work anymore. So the carroussel and the popover are related?

[Thallius]

@bruno19

$('[data-toggle="popover"]').popover();
    });
    $("[data-toggle=popover]")

You are mixing up quotes and double quotes in even the same action.

The correct syntax should be

$("[data-toggle='popover']");

[bruno19]

Thanks for the remarks.
I reset my previous vendor.js file (version4.1), and all seems to work well again.