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 / , 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" );

     }

  }); 

/ is the link seems tutorial, but i am unable to implement it to above code. Any help please?

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/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/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?

• javascript
• jquery
• css
• twitter-bootstrap

• I don't see any popvers in the fiddle. – knitevision Commented Apr 13, 2014 at 4:54
• @knitevision jsfiddle/ZnJ6b/19 .. you have to hover on those names to see a "tweet" image & click on it to see popovers – user3482559 Commented Apr 13, 2014 at 5:01
• still don't see anything :) – knitevision Commented Apr 13, 2014 at 5:48
• @knitevision my.jetscreenshot./demo/20140413-dfcn-175kb.jpg – user3482559 Commented Apr 13, 2014 at 5:59

2 Answers 2

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

I've mented 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

this actually fix the issue: $('.popover').each(function() { $(this).modal('hide'); });