Why is the popover component experiencing issues despite the popover directives functioning properly?

Trying to incorporate BootstrapVue's popovers has been a challenge. I believe I have imported all necessary components.

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbca3bcbca9bee2a6bf8cfde2fdfae2fc">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b4047404655441942415174061a031a04">[email protected]</a>/dist/bootstrap-vue.common.min.js"
           integrity="sha256-NTImazhsLEaQ0a59ZMLLxaOfFnKZNLJbbTcZh9YBM58="
           crossorigin="anonymous"></script>

The basic popovers are functional with:

<div id="general-info" class="questionMarkHelp" v-b-popover.hover.bottom="'On this page, you can view a summary of statistics for your municipality'">

However, utilizing b-popover isn't producing the intended outcome:

<font-awesome-icon id="investigations" icon="question-circle" size="2x"/>
<b-popover target="investigations" placement="bottom" triggers="hover">
           Here you can find statistics on investigations.<br>
           You can see how many investigations your municipality has.<br>
           How many are ongoing.<br>
           How many resulted in intervention.<br>
           How many did not result in intervention
</b-popover>

It is evident that I would like the ability to format the text inside the popover using
tags. Otherwise, I may consider resorting to using the directive approach exclusively.

javascriptvue.jsbootstrap-4popoverbootstrap-vue

Answer №1

When utilizing Bootstrap-Vue, there is no need to import jQuery, popper, or bootstrap.js. For details on what needs to be imported, you can refer to this link.

The essential item to import from Bootstrap is their CSS/SCSS. (While you can still include jQuery and popper if needed for other purposes, it is not mandatory)

All other requirements are handled by the Vue-specific components provided by Bootstrap-Vue.

Your code functions correctly even without unnecessary file imports, as demonstrated in the following snippet. (I have substituted your font-awesome-icon with the Bootstrap-Vue icon component, which should not impact the outcome).

Furthermore, note that the v-b-popover directive supports the html modifier for formatting the string passed as HTML.

Edit: It appears that bootstrap-vue.common.min.js does not support the b-popover component. Switching to importing bootstrap-vue.min.js instead resolved the issue with the component.

new Vue({
 el: "#app",
 data() {
  return {
    text: "Here you can find statistics regarding investigations.<br>You can view the number of investigations in your municipality.<br>How many are ongoing.<br>How many resulted in intervention.<br>How many did not result in intervention"
  }
 }
});
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594c9929181a4d6cad3cad4">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1bce7e4f4d1a3bfa6bfa1">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for establishing a worldwide validation standard using FormKit?

When developing forms using FormKit, I rely on the Schema to construct the forms. We are in need of a solution that sets a universal message of This field is required for the required validation rule, instead of displaying [field] is required. Is there a ...

vue.jsformkit

Making certain parts of a select list text bold while keeping others in normal font in React

I need to create a select list that displays various products with their names and a count in bold. Here's my approach: To achieve this, I am populating an array called productInformation with each product name and its corresponding count like this: ...

javascriptjqueryreactjs

unable to perform a specific binary operation

Is there an efficient method to achieve the following using binary operations? First byte : 1001 1110 Second byte : 0001 0011 Desired outcome : 1000 1100 I am looking to reset all bits in the first byte that correspond to bit values of 1 in the secon ...

javascriptbinary

Show only specific items in an AngularJS application

As a newcomer to AngularJS and the Ionic framework, I'm currently working with the basic Starter Tabs Ionic template. I would like to implement a "Favourite/Bookmark" feature for certain items and display them on a separate tab. The structure of my b ...

javascriptangularjsionic-framework

Spotify app experiencing issues with Angular's ng-repeat functionality

In my code, I am facing an issue where ng-repeat is not functioning as expected. Here is the content of my App.js file: var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource']) app. ...

javascriptangularjs

Safari is not properly rendering a React/Next.js website (showing a blank page)

Recently, I've been facing a frustrating bug on my Next.js website. When I try to open it in Safari, there's a 50/50 chance that it will either load correctly or show a blank page with faint outlines of components but no text. This issue occurs o ...

javascriptnode.jsreactjssafarinext.js

Retrieving data from a dynamic form using jQuery

Can someone assist me with the following issue: I have a dynamic module (generated by a PHP application) that includes input fields like this: <input type="text" class="attr" name="Input_0"/> <input type="text" class="attr" name="Input_1"/> ...

javascriptjqueryhtml

The npm start command is throwing a TypeError because it cannot determine the node

I am encountering an issue while trying to start a react app using npm start. My project is using node js 10.24.1, and due to it being a legacy project, I am unable to upgrade to a newer version. I have attempted clearing the cache with force, deleting n ...

javascriptreactjsnode.jsnpm

What is the extent of an object within a JavaScript Array?

Exploring scopes in JavaScript has led me to an interesting discovery when calling functions from an array. In the example below, I experiment with three different scopes: one bound to an Object named foobar, one bound to window, and a third one which po ...

javascript

What steps can I take to ensure my CSS selector for the element is functioning properly?

Here is an example of some code: <html> <head> <style> .test{ background-color: red; p { background-color: yellow; } } </style> </head> <body> <div class="test"> ...

javascriptcssangular

Problems with resizing iFrames across different domains

I found this code on a different website and decided to use it on my own site, <!DOCTYPE html> <html> <head> <script src="http://domain-name.co.uk/js/theirscript.js"></script> </head> <body> ...

javascripthtmliframe

Step-by-step guide on how to load an Ext JS tab after clicking on it

I have an Ext JS code block that creates 4 tabs with Javascript: var tabs; $(document).ready( function() { fullscreen: true, renderTo: 'tabs1', width:900, activeTab: 0, frame:true, ...

javascriptjqueryextjs

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

javascripthtmlcssreactjs

The ng-blur functionality will only trigger if the click event occurs within the bounds of the textbox

I am facing an issue with a textbox that should display a certain value even after being deleted. When the input is cleared and clicked away from, I want the value to reappear in the textbox. Currently, there seems to be a problem with this functionality ...

javascriptangularjs

Server-side access to form data has been restricted

When I make a PUT request from the frontend, I am currently using the XMLHttpRequest and FormData API. However, on the server side, I am not receiving any data such as req.params, req.body, and req.query are all empty. Front-end Implementation var report ...

javascriptexpressxmlhttprequest

The autocomplete feature in Google Maps is not functioning properly when used within a modal

I've integrated the Google Maps API to enable autocomplete address functionality for an input box on my page. However, I'm encountering an issue where everything works fine on the page itself, but it doesn't work when the input box is placed ...

javascripthtmlangularjsgoogle-maps

The functions.php file is failing to execute the JavaScript files located in the js folder

I've been attempting to incorporate a JS accordion into my Wordpress blog, but I seem to be encountering issues with the accordion.js file not loading through the functions.php file. Interestingly enough, when I manually add the js code in the header ...

javascriptphpwordpress

Angular JS: Distribute objects from a single array to various arrays or services

I have recently embarked on developing a basic app using Angular JS, utilizing a service/factory to manage data and enable the addition of objects. Within the array of various individuals (listed in the html), you can include them as candidates by employi ...

javascriptjsonangularjs

I encountered a permission error while trying to npm install, despite running the command with root privileges

After running npm install as root, I am still encountering permission errors. This is unfamiliar territory for me. I have attempted using chmod -R 777 *, and chown nobody:nogroup -R * within the project folder, but to no avail. Here's the specific er ...

javascriptnode.jsnpmnpm-installnode-gyp

Accessing information from req.files in a TypeScript environment

I am currently using multer for uploading images. How can I retrieve a specific file from req.files? Trying to access it by index or fieldname has been unsuccessful. Even when I log it, I see that it's a normal array, so I suspect the issue may be rel ...

javascriptnode.jstypescriptexpressmulter