Tips for customizing the appearance of Bootstrap 5.0 popovers on the fly

Back in Bootstrap 4.0, you could easily change the popover content dynamically based on the selector or reposition it using the $tip property.

$("body").popover({
    container: 'body',
    content: 'loading...',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.selector1', '.selector2', ... 
 }).on('shown.bs.popover', function () {
    var this = $(event.target);
    ...
    if (this.hasClass('.selector1')) {
      var popover_method = ".../dynamic_popover_1"
    }
    ...
    $.get(popover_method, {
      ...
      },
      function(response) {
        var popover_tip = $(this.data('bs.popover').tip);
        popover_tip.find('.popover-body').empty().append(response.popover_data_json);
        if ((popover_tip.offset().top - $(window).scrollTop()) + popover_tip.height() > window.innerHeight) {
              popover_tip.css({ top: - popover_tip.height() + 5 });
        }
        ...

However, in Bootstrap 5.0, the data('bs.popover') method no longer exists. So, how can you achieve the same functionality in Bootstrap 5.0?

javascriptbootstrap-5bootstrap-popover

Answer №1

To achieve the desired outcome, it is recommended to utilize vanilla JS. Grab the popover instance during the 'shown' event by using 

bootstrap.Popover.getInstance(myPopoverTrigger)
. This will allow you to access _config and tip as required. Here is a sample implementation:

var myPopoverTrigger = document.getElementById('myPopover')
var myPopover = new bootstrap.Popover(myPopoverTrigger,{
    content: 'Loading...',
    trigger: 'hover',
})

myPopoverTrigger.addEventListener('shown.bs.popover', function (e) {
    // obtain the popover instance
    var popover = bootstrap.Popover.getInstance(myPopoverTrigger)
    // modify the content
    popover._config.content = "Done!"
    popover.setContent();
    // retrieve the tip and adjust the position
    var tip = popover.tip
    tip.style.left = '300px';
})

Check out the demonstration here:

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

How to divide a string by space after a specific character count using Javascript

I've been working on a tool that can divide input text into chunks based on a specific character count without breaking words in the process. Currently, I have set it to split the text after 155 characters. Even after conducting extensive research, ...

javascripthtml

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

Can someone assist me in adjusting my approach to waiting for an axios response? I'm currently sending a request to a WebService and need to wait for the response before capturing the return and calling another method. I attempted to utilize async/aw ...

javascriptnode.jstypescriptasynchronousaxios

How does Ruby on Rails facilitate interactions between multiplayer users and visitors?

I am looking to create a way for visitors to interact on my website. Imagine a virtual chat space. This involves collecting and sharing data among users, which can be accomplished using ajax or similar methods. However, I'm wondering if there are ex ...

javascriptruby-on-railsajax

Update the CSS property according to the selected list item in the slider using Glider JS

Looking to dynamically change the background image in CSS based on the active slide value in Glider.js Here is the CSS: html { background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEy ...

javascriptjquerycss

Issue with jQuery.off when using a dynamic function name

I am currently implementing a modular pattern for writing my JavaScript code and it has been an enjoyable experience! However, I have encountered a challenging situation. My Namespace structure looks like this: var settings, handlers, objects, Namespace ...

javascriptjquery

Encountering a TypeError with DataTables and Tabledit

I've been attempting to integrate DataTables with Tabledit, but I keep encountering the error message "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags also matches up. Interestingly, if I comment out the " ...

javascripthtmljquerydatatablestabledit

Experiencing an infinite loop due to excessive re-renders in

I'm receiving an error and unsure of the reason. My goal is to create a button that changes colors on hover. If you have a solution or alternative approach, please share! import React, {useState} from 'react' function Login() { const ...

javascriptreactjs

Modify the contents of three div elements by incorporating JavaScript and ajax techniques

Currently working with rails 4 and JavaScript, I am faced with the following dilemma: I want to be able to alter the content of 3 specific divs on my page by clicking a single button. The values in these divs are being created by a Ruby function located in ...

javascriptjqueryruby-on-railsrubyajax

Creating a mandatory and meaningful text input in Angular 2 is essential for a

I am trying to ensure that a text material input in my app is mandatory, with a message like "Please enter issue description." However, I have noticed that users can bypass this by entering spaces or meaningless characters like "xxx." Is there an npm pac ...

javascriptc#asp.netangulartypescript

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

javascriptphpjqueryhtml

Determine the number of elements chosen within a complex JSON structure

I need to figure out how to count the length of a jsonArray, but I'm stuck. Here's an example to start with: https://jsfiddle.net/vuqcopm7/13/ In summary, if you click on an item in the list, such as "asd1", it will create an input text every t ...

javascripthtmljsonangularjs

Error: Document's _id field cannot be modified

I am new to both MongoDB and Backbone, and I find it challenging to grasp the concepts. My main issue revolves around manipulating attributes in Backbone.Model to efficiently use only the necessary data in Views. Specifically, I have a model: window.User ...

javascriptmongodbbackbone.jsexpress

What would be the best way to structure this workflow as a JavaScript data format?

I have a complex workflow that I need to represent as a JavaScript data structure. This workflow involves a series of questions and answers where the response to one question determines the next one asked. Here is a basic example of what this workflow migh ...

javascriptdata-structuresrecursionnodestree-nodes

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

javascripthtmlcssinternet-explorer-8opacity

Having difficulty with sending an AJAX GET request to connect to mongodb

I've been facing a challenging task of displaying data from a mongodb collection on the browser using nodejs and express. Here's the client-side call: document.onload= $(function (e) { var i = 0; $.ajax({ type: "GET", url: "http://localh ...

javascriptajaxnode.jsmongodbexpress

Tips on revitalizing a bootstrap wizard

In my JSP file, I am using a Bootstrap wizard. You can see the wizard layout in the following link: The wizard allows me to add employee elements that are stored in a JavaScript array (I also use AngularJS). At the final step of the wizard, there is a su ...

javascriptjqueryangularjsjsp

Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what&a ...

javascripthtmlcss

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

javascriptjquerybackbone.jsunderscore.js

The Vue-cli webpack development server refuses to overlook certain selected files

I am attempting to exclude all *.html files so that the webpack devserver does not reload when those files change. Here is what my configuration looks like: const path = require('path'); module.exports = { pages: { index: ...

javascriptvue.jswebpackwebpack-dev-server

What steps should I take to configure a test environment specifically for conducting tests with selenium and phantomjs?

I am in the process of setting up my environment for headless testing using Selenium and PhantomJS. Getting PhantomJS Ready: To start, I created a folder named c:/phantomjs and downloaded all the necessary PhantomJS script files into it. Next, I set up a ...

javascriptseleniumtestingselenium-webdriverphantomjs