Bootstrap Popover Ignoring Placement Option

I have a select inside a bootstrap modal that contains options with bootstrap popovers containing a more detailed description of each option. Currently no matter what I set the placement option to in the popover initialization, it pops up in the middle of the select box, covering the other options in the list. The select allows multiple options to be selected so this is not ideal for user experience. Looking at similar questions, I thought that setting container: 'body' would help, but the issue persisted as shown here:

Popover
screenshot image

My current popover initialization:

$('#selectId>option').popover({
    container: 'body',
    html: true,
    placement: 'right',
    trigger: 'manual',
});

I have tried changing the position to 'left', 'top', and 'bottom', and no matter which option I use, the popover appears in the same position when I trigger it using $('#selectId>option').popover('show')

  • Bootstrap Data-Toggle attribute is not working with Cards generated from JS loop

    I'm working on a website that makes a call to a database. It takes the JSON from the database and loops through a specific node -- appending HTML code to a div tag, which creates a Card for each database entry. I want to be able to have a Bootstrap Popover (or Tooltip) that appears when a Card is clicked (or hovered over if Tooltip). The Cards that are generated within the function fail to produce a Popover or Tooltip at all. If I append the same HTML code outside the function using JQuery, it works just fine. I'm unsure what is happening here.

    Here's the function that loops through the database JSON and creates a card for each child.

    function getWeekEvents(day, id) {
        return firebase.database().ref(day).once('value').then(function(snapshot) {
            var data = snapshot.val();
            for (item in data) {
                var event = data[item]["event"];
                var loc = data[item]["loc"];
                var time = data[item]["time"];
    
                $("#" + id).append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-content='Content' data-placement='right'>" + 
                                        "<div class='card-body my-lg-n3'>" + 
                                            "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
                                                "<p>" + event.substring(0,10) + "...</p>" +
                                            "</div>" + 
                                        "</div>" +
                                    "</div>");
            }
    
        });
    }
    

    The code below is outside any function and works just fine. It creates a card in the same way, but the Popover works.

    $("#tuesday").append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-placement='top' title='Hello'>" + 
    "<div class='card-body my-lg-n3'>" + 
        "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
            "<p>" + "...</p>" +
        "</div>" + 
    "</div>" +
    "</div>");
    

    And I also have this part that is required for Popovers to work.

    $(function () {
        $('[data-toggle="popover"]').popover()
    });
    

    I also tried creating a Tooltip in the same way, instead of a Popover, but it resulted in the same problem. This lead me to believe that there may be something happening with the data-toggle attribute? I could be wrong. Does anyone have any thoughts?

  • Bootstrap Popover isn't working with JS-generated HTML code

    I'm working on a website that generates Bootstrap Cards from a database query. Once I query the database, I need to append HTML code that creates a Card to a div element. With that HTML code, I want to have the ability to have a popover with each Card. Here's my code below:

    $("#" + id).append("<div class='card week-cards-ann event-style'>" +
      "<div class='card-body my-lg-n3'>" +
      "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" +
      "<p>" + event.substring(0, 10) + "...</p>" +
      "<a tabindex='0' data-trigger='click' title='Title' data-toggle='popover' data-content='Content'></a>" +
      "</div>" +
      "</div>" +
      "</div>");
    
    $(function() {
      $('[data-toggle="popover"]').popover()
    });
    

    The tag is supposed to be the element that generates the popover. I've searched Bootstrap + other internet sites but I haven't found anything. The HTML is being generated correctly, but when I click the card on the website -- no popover appears. If I go into my HTML file and manually recreate this code snippet, it will work. When it's generated by JS, it does not.

  • Bootstrap 4 Popover show/hide div

    Using Bootstrap 4, I have a popover set to display some HTML content. Inside the popover, I would like to show/hide a div with additional content using jQuery, but I can't get it to show the hidden content.

    HTML

    <div class="text-center">
        <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>
    </div>
    <!-- popover content -->
    <div id="popover-content" class="d-none">
        <div class="card border-0">
            <div class="card-body">
                <a href="#" id="show-div">Show more content</a>
                <div id="hidden-content" class="d-none">
                    div with more content...
                </div>
            </div>
        </div>
    </div>
    

    jQuery

    $(function () {
        $('#show-popover').popover({
            container: 'body',
            html: true,
            placement: 'bottom',
            sanitize: false,
            content: function() {
                return $('#popover-content').html();
            }
        })
    });
    
    $('#show-div').click(function(){
        $('#hidden-content').toggle();
    });
    

    Link to CodePen