CODEWITHSUNDEEP
bootstrap-5bootstrap5-modal
TangoMike
TangoMike

Reputation: 133

How to correctly initiate a Bootstrap 5 Popover on a button placed in the modal footer

I am trying to show a popover on buttons placed in the footer of a bootstrap 5 modal.

The popover will display, but only if the container is set to something in the body, in which case the lower part of the popover is missing.

var locateScreen = new bootstrap.Modal(document.getElementById('TestModalFooterPopover'))


        //Popover
        var exampleEl = document.getElementById('TestPopover-btn')
        var popover = new bootstrap.Popover(exampleEl, {
            html: true,
                sanitize: false,
                container: '.container-fluid',
            title: "Confirm user action?",
            content: $('[data-name="popover-test-content"]')
        });

        
locateScreen.show()
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="TestModalFooterPopover" tabindex="-1" aria-hidden="true" data-bs-theme="dark" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-fullscreen modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="locateScreenLabel">Test Footer Popovers</h1>
        </div>
        <div class="modal-body">
             <div class="container-fluid h-100">Hello,world.</div>
      </div>
        <div class="modal-footer">

            <button type="button" class="btn btn-sm btn-warning" id="TestPopover-btn">Test Popover</button>
            
            <div id="popover-test-holder" class="d-none">
                <div data-name="popover-test-content">
                    <div class="col-sm-12 input-group-sm">
                        <p>Here is a popover with some confirm buttons, where is the bottom of the popover?</p>
                    </div>
                    <div class="text-center">
                        <button href="#" class="btn btn-sm btn-outline-danger me-2">No</button>
                        <button href="#" class="btn btn-sm btn-outline-success">Yes</button>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-sm btn-danger"  id="locate-btns-close">Close Session</button>
        </div>
      </div>
    </div>
</div>

Setting the container as .modal-footer does not produce the desired effect.

How can I display the popover correctly, so it fully appears above the button it is connected to?

Edit to add, might need to run the snippet in full screen to see what I mean

Upvotes: 2

Views: 1211

Answers (1)

traynor
traynor

Reputation: 8632

Adding any of these values as container seem to work fine:

    container: exampleEl,
    //container: '.modal-footer',
    //container: 'body',

and the note says:

Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc). https://getbootstrap.com/docs/5.2/components/popovers/

    var locateScreen = new bootstrap.Modal(document.getElementById('TestModalFooterPopover'))


        //Popover
        var exampleEl = document.getElementById('TestPopover-btn')
        var popover = new bootstrap.Popover(exampleEl, {
            html: true,
            sanitize: false,
            container: exampleEl,
            //container: '.modal-footer',
            //container: 'body',
            title: "Confirm user action?",
            content: $('[data-name="popover-test-content"]')
        });


locateScreen.show()
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="TestModalFooterPopover" tabindex="-1" aria-hidden="true" data-bs-theme="dark" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-fullscreen modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="locateScreenLabel">Test Footer Popovers</h1>
        </div>
        <div class="modal-body">
             <div class="container-fluid h-100">Hello,world.</div>
      </div>
        <div class="modal-footer">

            <button type="button" class="btn btn-sm btn-warning" id="TestPopover-btn">Test Popover</button>

            <div id="popover-test-holder" class="d-none">
                <div data-name="popover-test-content">
                    <div class="col-sm-12 input-group-sm">
                        <p>Here is a popover with some confirm buttons, where is the bottom of the popover?</p>
                    </div>
                    <div class="text-center">
                        <button href="#" class="btn btn-sm btn-outline-danger me-2">No</button>
                        <button href="#" class="btn btn-sm btn-outline-success">Yes</button>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-sm btn-danger"  id="locate-btns-close">Close Session</button>
        </div>
      </div>
    </div>
</div>

Upvotes: 0

Related Questions