Search code examples
jquerycsstwitter-bootstrappopover

Bootstrap Popover x button works, but title disappears after first time clicked

I basically used the instructions found in this question: stack-overflow-question

However, a strange thing happens. After I click the x, the title disappears completely and never reappears until I reload the page.

Here is my code: 

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
    }).on('shown.bs.popover', function() {
        var popup = $(this);
        $(this).parent().find("div.popover .close").click(function() {
            popup.click();
        });
    });
});

<div id="myDiv">
    <a  class="btn btn-lg btn-default extra" data-toggle="popover" data-html="true" title="Modify Formulary <a href='#' class='close' data-dismiss='alert'>×</a>" data-placement="left"  data-content='SOME CONTENT  '><i class="menu-icon fa fa-edit"></i></a> 
</div>

There is also a little css:

    .popover-title .close{
    position: relative;
    bottom: 3px;
}

I have bootstrap and jquery included both css and js and I believe latest versions.

Here is the codepen example: click

Solution

  • You are using the wrong version of Bootstrap. For this to work correctly you need Bootstrap v. 3.3.5. Here is the working codepen: http://codepen.io/cavanflynn/pen/XborQB

    cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js