What would cause a popover component to fail when popover directives work

Question

I'm trying to use BootstrapVue's popovers. As far as I can tell I am importing everything I need

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                 crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
           integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
           crossorigin="anonymous"></script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.7.0/dist/bootstrap-vue.common.min.js"
           integrity="sha256-NTImazhsLEaQ0a59ZMLLxaOfFnKZNLJbbTcZh9YBM58="
           crossorigin="anonymous"></script>

I can get popovers to work with

<div id="general-info" class="questionMarkHelp" v-b-popover.hover.bottom="'På denna sida kan du se en sammanställning av statistik för din kommun'">

But when I try to use b-popover, it doesn't work

<font-awesome-icon id="investigations" icon="question-circle" size="2x"/>
<b-popover target="investigations" placement="bottom" triggers="hover">
           Här kan du statistik över utredningar.<br>
           Du kan se hur många utredningar din kommun har.<br>
           Hur många som är pågående.<br>
           Hur många som ledde till insats.<br>
           Hur många som inte ledde till insats
</b-popover>

As you can see, I would like to be able to format the text inside the popover with
tags. Otherwise I would probably just be content with using the directive type.

Answer 1

If you're using Bootstrap-Vue, you do NOT need to import jQuery, popper and bootstrap.js. You can read what you need to import here.

The only thing you need to import from bootstrap is their CSS/SCSS. (You can still import jQuery and popper if you use them for something else, but it's not required)

Everything else i handled by the Vue specific components from Bootstrap-Vue.

Your code works fine, if i don't import the unnecessary files, as you can see in the snippet below. (I've replaced your font-awesome-icon with the Bootstrap-Vue icon component, this shouldn't make a difference).

Another thing to note is that the v-b-popover directive supports the html modifier to format the string you pass in as HTML.

Edit: It looks like bootstrap-vue.common.min.js doesn't support the b-popover component, switching it to import bootstrap-vue.min.js instead fixed the component.

new Vue({
 el: "#app",
 data() {
  return {
    text: "Här kan du statistik över utredningar.<br>Du kan se hur många utredningar din kommun har.<br>Hur många som är pågående.<br>Hur många som ledde till insats.<br>Hur många som inte ledde till insats"
  }
 }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.css"/>

<!-- Import Vue and Bootstrap-Vue Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.js"></script>

<!-- Only imported for this example -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>



<div id="app" class="container">
  <!-- Using the directive with the HTML modifier  -->
  <b-icon v-b-popover.html.hover.bottom="text" icon="question"></b-icon>
  
  <!-- Using the component -->
  <b-icon id="investigations" icon="info"></b-icon>
  <b-popover target="investigations" placement="bottom" triggers="hover">
    <span v-html="text"></span>
  </b-popover>
</div>