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

Il y a un une solution très simple ici (ce n'est pas ma solution, mais elle fonctionne parfaitement) :

$('.link-popover').click(function(){
    $('.link-popover').not(this).popover('hide'); //all but this
});

Answer 2

Conformément à la documentation de bootstrap : Utilisez le déclencheur de focalisation pour désactiver les fenêtres contextuelles au prochain clic de l'utilisateur.

<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-   trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Answer 3

Je me suis amusé avec cela et il y a quelques autres problèmes concernant le déclenchement de l'affichage/cache manuel pour que cela fonctionne bien. Le survol est en fait mousein y mouseout et si vous n'ajoutez pas quelques contrôles supplémentaires, vous rencontrerez les problèmes que je viens de rencontrer !

Voici ma solution en action et j'essaierai d'expliquer ce que j'ai fait.

$(function () {

    var overPopup = false;

    $('[rel=popover]').popover({
        trigger: 'manual',
        placement: 'bottom'

    // replacing hover with mouseover and mouseout
    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        // set a flag when you move from button to popover
        // dirty but only way I could think of to prevent
        // closing the popover when you are navigate across
        // the white space between the two
        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200);
    });
});

Cela a parfaitement fonctionné pour moi avec le code html suivant :

<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>

J'espère que cela vous arrangera :)

Answer 4

Utilisation Les rappels d'événements de Bootstrap 3 vous pouvez faire :

$(document).on('show.bs.popover', function() {
  $('.popover').not(this).popover('hide');
});

et dans coffeescript

$(document).on 'show.bs.popover', ->
    $('.popover').not(this).popover('hide')

Answer 5

Solution simple pour fermer tous les autres popovers. Ceci peut être ajouté à n'importe quel événement où une popup apparaîtra, comme un clic ou un survol, etc. Juste avant d'afficher le popover, collez le code suivant :

$('.popover').not(this).hide(); //Hides all other popovers

Cette opération permet de supprimer toutes les fenêtres contextuelles de la page, à l'exception de la fenêtre en cours.