Twitter Bootstrap : Cacher les autres popovers quand l'un d'entre eux est ouvert

Question

Le code Bootstrap suivant me permet d'obtenir un popover "collant" (les utilisateurs peuvent donc interagir avec le contenu à l'intérieur du popover). Le problème est que lorsqu'un popover est ouvert, les autres popovers doivent être fermés (cachés). Une idée sur la façon dont je peux mettre cela en œuvre ?

$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
    $(this).popover('show');
    e.preventDefault(); 
});

Answer 1

J'ai réussi à faire la même chose en cachant le popover qui n'était pas celui sur lequel on avait cliqué. Je ne suis pas sûr, mais cela semble bien fonctionner pour moi. Il s'agit d'un popover qui s'affiche au moment du clic et qui reste en vie. Il est caché lorsqu'on clique sur un autre popover.

<script>
$(function () {
    $('[rel=popover]').popover({
    }).click(function (e) {
        $('[rel=popover]').not('#friend_' + $(this).attr('id')).popover('hide');
    });
});
</script>

Answer 2

Plus simple de faire le travail :

$('[rel=popover]').popover({
    trigger: 'manual',
    placement: 'bottom'
}).click(function(e) {
    $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
    var $popover = $(this);
    $popover.popover('toggle');
});

assurez-vous que votre popover a un identifiant unique ;] votre popover se comportera comme il le fait par défaut, avec un seul popover à la fois.

Answer 3

J'ai découvert qu'il y avait des problèmes avec les popovers dynamiques, donc voici donc 2 solutions pour les popovers statiques et dynamiques :

La première solution consiste à utiliser l'option popover triger:'focus' mais cette option ne fonctionnera pas sur certains appareils Android

et le second :

$('body').popover({
    html: true,
    //this is for static and dynamic popovers
    selector: '[data-toggle="popover"]',
    trigger: 'click',
    content: function () {
        //i am using predefined content for popovers. replace with your code or remove at all
        return $($(this).data('templateselector') + ' .content').html();
    },
    title: function () {
        return $($(this).data('templateselector') + ' .title').html();
    },
    container: 'body'
}).on('show.bs.popover', function (e) {
    // i've found that showed popovers has aria-describedby
    // and $('[data-toggle="popover"]).not(this) not working for dynamic popovers so i came with this:
    $('[data-toggle="popover"][aria-describedby]').popover('hide');
    var trigger = $(e.target);
    // this is for adding custom class for popover container
    // just remove it if you dont need
    trigger.data('bs.popover').tip().addClass($(trigger).data('class'));
});

Answer 4

Utilisez cette méthode pour masquer tous les autres popovers lorsque vous survolez ou cliquez sur un autre élément pour que le popover s'ouvre.

un deux trois quatre

$(document).ready(function(){    
    $('.btnPopover').mouseover(function(){    
    $(this).popover({
        html: true,
        trigger: 'manual'
    }).popover('show');
        $('.btnPopover').not(this).popover('hide');
    }); 
});

Assurez-vous d'ajouter bootstrap.js et bootstrap.css à votre page. J'espère que cela vous aidera.

Santé ! Suraj Kumar

Answer 5

Vous devez utiliser un <a> pour des raisons de compatibilité.

Mon violon : https://jsfiddle.net/oneflame/pnb8Ltj3/

Bootstrap Lien -- http://getbootstrap.com/javascript/#dismiss-on-next-click

<div id="FragmentText1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, est laborum.
</div>

$(document).ready(function(){               
  $('a.LexicalEntry').popover({ 
    html : true,    
    content: function() {
      return getLexicalDefinition($(this).text());
    }   ,   
    trigger: 'focus',
    placement: 'auto',
    html: true,
    container: 'body'
  });
});

// *** Injects HTML into raw text.
// *** Splits the content string using a whitespace regular expression. 
$('#FragmentText1').each(function() {

    // var words = $.trim( $(this).text() ).split(/\s+/g);

    var $this = $(this);
    $this.html(
        $this.text().trim().replace(/\b(\w+)\b/g,
            "<a tabindex='0' class='LexicalEntry'' role='button' title='Definition: $1'>$1</a>"
        ));

});