CODEWITHSUNDEEP
jquerycsstwitter-bootstrappopover
Dan Safee
Dan Safee

Reputation: 1618

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

Upvotes: 0

Views: 638

Answers (2)

Deja Vu
Deja Vu

Reputation: 731

fiddle

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    placement: 'top',
    html: true,  
    title: 'Modify Formulary <a href="#" class="close" data-dismiss="alert">×</a>',
    content: 'SOME CONTENT  ',
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  });
});

Upvotes: 1

cfly24
cfly24

Reputation: 1962

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

Upvotes: 1

Related Questions