The 4.6 version of Bootstrap introduces a popover feature that remains visible even when the element reaches its boundaries, stopping scrolling in

I am facing an issue with popover display using Bootstrap 4.6

Here is a basic example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6208131707101b22514c574c53">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98d978f9788">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b0aab2aab5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</head>
<body style="background-color: cadetblue; height:1000px">

<header style="height: 100px">

</header>
<section style="overflow-y: auto; height: 500px; background-color: cornsilk;">
    

<div style="height: 1000px" > </div>
<div id="test">
<button type="button" 
    data-placement="top" 
    data-toggle="popover" 
    title="Blah" 
    data-content="Bleh Bleh">Blih</button>
</div>
<script>
$("button").popover({})
</script>
<div style="height: 1000px" > </div>



  
</section>

</body>
</html>

the popover is correctly shown when the button is visible inside the scroll:

Popover shows ok

However, when I scroll and the button transitions through the "cadetblue" zones, the popover does not scroll along but instead gets stuck at the top or bottom boundary:

Popover stays in the "upper limit" when scrolling down the section

Popover stays in the "lower limit" when scrolling up the section

I have tried adjusting the container, boundary, and fallbackPlacement options based on various solutions suggested for similar issues, but so far, nothing has worked. It seems that achieving proper popover visualization in Bootstrap 4.6 can be challenging, but considering the simplicity of my problem, I believe I must be missing something essential.

csstwitter-bootstrapbootstrap-4

Answer №1

After much searching, I finally stumbled upon a fix using the guidance provided in this specific issue.

I discovered that Popper (the library utilized by Bootstrap for displaying Popovers) toggles the attribute "x-out-of-boundaries" on the popover when the triggering element moves outside its boundaries.

Therefore, the remedy involves incorporating a CSS rule like this:

.popover[x-out-of-boundaries]{
    display: none;
}

This effectively hides the popover when the trigger element is no longer visible.

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

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Recently delved into the world of Javascript and encountered a roadblock that I can't seem to overcome. Here's the snippet of code causing me trouble: add = document.getElementById("add"); add.addEventListener("click", () => { console.log("Ple ...

javascripthtmlcssarrays

Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements .container { margin: 20px; } .parent, .child { outline: none; border: none; user-select: none; cursor: pointer; } <div class="container"> ...

htmlcss

Utilizing mobile emulators to optimize the viewport for mobile application development

Are mobile emulators like MITE() able to detect viewport settings? <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> Can anyone recommend a mobile emulator that does recognize viewport settin ...

htmlcssmobilemedia-queriesviewport

IE compatibility with flexbox and columns

While everything is running smoothly on Chrome and Firefox, it seems that I have encountered a problem with IE (IE11). In my responsive layout, I am aiming for the menu to be horizontal in PC mode and vertical in tablet/mobile mode. It appears to be worki ...

cssflexboxinternet-explorer-11

Tips for positioning text in front of images

This is the code I am currently working with: .left-ul { margin-left: 10px!important; display: inline-block!important; vertical-align: top; width: 350px; } .iconic { padding ...

css

Using Angular 13 causes Bootstrap 5 dropdowns to not open as expected

Hello everyone, I'm currently working on an angular project and incorporating bootstrap 5. I'm encountering an issue with an expanded dropdown multiselect feature that I'm trying to implement. For reference, I've been following this ex ...

angulartwitter-bootstrapbootstrap-5

The drop-down links vanish into the depths of the webpage's body

Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...

htmlcssdrop-down-menumenuhyperlink

Tips for rotating individual letters within a sentence on popular web browsers, including Chrome

Can you make a sentence appear with each individual letter rotating and getting larger? This is my approach: I decided to split the sentence into separate span elements, one for each letter. Then I used CSS transform -webkit-transform to animate the lette ...

javascriptcssgoogle-chromed3.js

Step by step guide to setting date in inline bootstrap datetimepicker

I attempted to set the date and time using the following code: $("#datetimepicker1").data("DateTimePicker").date('2017/04/23 23:34:23'); However, I encountered an error stating "cannot read property date of undefined." Are there alternative me ...

bootstrap-4bootstrap-datetimepickereonasdan-datetimepicker

Modify the date input format in PHP, Bootstrap, Javascript, and HTML5

My current date input format is mm/dd/yyyy and I would like to change it to dd/mm/yyyy. Does anyone know how to do this? I am using Bootstrap 4. Here is the code snippet: <!DOCTYPE html> <html> <head> <title></title> ...

javascripthtmlbootstrap-4

Enhance the visual appeal of your website by incorporating a dazzling sparkle effect using

I have implemented the magnificPopup script on my gallery page. Check out magnificPopup on Github In addition, I have added a sparkle effect using this script: Try out the Sparkle Effect Currently, the sparkle effect only appears when hovering over eac ...

jqueryhtmlcssmagnific-popup

"Discover the art of arranging div elements into a grid format with multiple rows and two columns

<div class="parent"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div ...

javascriptphpjquerycssrows

How can you align two div elements side by side, if the first div is spanning across two lines?

I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...

htmlcss

Is there a way to create a clickable image on my wordpress.org website that links to the entire image?

Currently, only the title of my posts can be clicked to access each individual post. I would like the entire image to also link to the post. <article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col- ...

htmlcsswordpress

Upon clicking the checkbox, only the ul tag will be displayed on the screen

It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag. .show-menu { display:block; } #menu{ float:left; } #social{ ...

htmlcsscheckbox

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

There seems to be some spacing issues with the HTML menu items

Trying to customize my menu with two levels, I decided to remove the background color from the top level items by modifying the ".nav li" CSS class. However, this caused an issue with the display of sub-menu items, creating a 5px gap when hovering over the ...

htmlcssmenu

Enhanced Compatibility of HTML5/CSS3 Modal Box with Internet Explorer

I'm experimenting with HTML5/CSS3 for the first time and have implemented a cool little link to display a dialog (modal) on one of my web pages. While this works perfectly in Chrome/Firefox, it unfortunately doesn't function properly in Internet ...

htmlinternet-explorercsscross-browser

Are dots mysteriously showing up in the navigation bar on Firefox?

Recently, I created a navigation bar on Chrome and everything seems to be working fine. However, when I tested it on Firefox, I noticed that there is an unexpected dot appearing in front of each navigation tab. Does anyone have any idea why this might be h ...

htmlcss

Tips for executing parallax designs, similar to the techniques used on the

Currently, I am in the process of creating a website that utilizes parallax scrolling. Here is a brief overview of what I have accomplished thus far. I decided to use the skrollr plugin to achieve the desired parallax effect. Through this plugin, I was abl ...

javascriptjqueryhtmlcssimage