Twitter bootstrap popover close all before opening a new one

Twitter bootstrap popover close all before opening a new one

I’m not JavaScript wizard, so I’m missing something obvious here I’m sure. I have a unorder-list that has multiple links & When user do hover on the <li> then they can see the link to click on it in order to see Twitter Bootstrap's pop-over behavior.

My problem is

  • It does not closes previous pop-over if i open a new one.
  • And also it does show up again the tweet link if again mouse over on the same “Tweet” image.

Here is fiddle http://jsfiddle.net/ZnJ6b/17/ , please take a look & try to help me.

js code looks like

 $("[data-toggle='popover']").popover({
    placement: 'right',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span>',
    content : '<input id="subproject_id" type="text"/>'
});

$('.add_btn').click(function(e) {  
          $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
         $("#subproject_id").focus();//textbox focus
          $(this).css("display","inline");
          $(this).removeClass( "add_btn" ).addClass( "new_add_btn" );
      }); 
  $(document).click(function(e) {    
     if(e.target.id=="popovercloseid" ) { 
          $('.new_add_btn').popover('hide'); 
          $('.new_add_btn').css("display","none");
          $('.new_add_btn').removeClass( "new_add_btn" ).addClass( "add_btn" );

     }

  }); 

http://blog.alysson.net/lang/pt-br/twitter-bootstrap-popover-close-all-before-opening-a-new-one/ is the link seems tutorial, but i am unable to implement it to above code. Any help please?

Your code has some unnecessary lines that deflect the behavior of the popover.

I’ve commented some of the lines and added this statement:

$('.add_btn').not(this).popover('hide');

so that only one popover is displayed at a time.

Demo

This bit of code to close your popover with a button:

$('html').on('click', '#popovercloseid', function (e) {
        $('.add_btn').not(this).popover('hide'); 
 }); 

Demo 2

.
.
.
.