[Vuejs]-What would cause a popover component to fail when popover directives work

by

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>
👤Hiws

Leave a comment