Twitter Bootstrap: Cacher les autres popovers quand on est ouvert

J'ai été en avoir un pour jouer avec cela et il ya quelques autres problèmes concernant le déclenchement du manuel d'afficher/masquer pour obtenir ce jouer gentiment. Passez la souris est en fait mousein et mouseout et, sauf si vous ajoutez-y quelques vérifications supplémentaires, vous rencontrerez des problèmes que je viens de faire!

Voici ma solution en action et je vais essayer 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 fonctionné parfaitement 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>

Espère que sortes vous 🙂

Que par le bootstrap docs: Utiliser le focus de déclenchement de rejeter popovers sur le clic suivant que l'utilisateur fait.

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

Simpiet solution pour fermer tous les autres popovers. Cela peut être ajouté à tous les cas où une fenêtre apparaît, cliquez/hover etc. Juste avant de vous montrer la liste de coller dans le code suivant:

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

Cela permettra d'éliminer tous les popovers sur la page, à l'exception de l'actuel

J'ai utilisé une fonction de mon contenu, donc je l'ai (en coffeescript) :

provideContentForPopover = (element) ->
  $('.some-selector').not(element).popover 'hide'
  "some content to be returned"

$('.some-selector').popover
  content: -> provideContentForPopover @

$('.allThePopovers').click(function () {
    if ($(this).hasClass('popoverIsOpen')) {
        $(this).removeClass('popoverIsOpen');
    } else {
        $('.popoverIsOpen').popover('hide');
        $('.allThePopovers').removeClass('popoverIsOpen');
        $(this).addClass('popoverIsOpen');
});

Il suffit de remplacer cliquez avec le hover ou mousein pour répondre à vos besoins.

J'ai été en mesure d'accomplir similaire par masquer selon la liste n'est pas celui qui a été cliqué. Je ne suis pas sûr, mais il semble bien fonctionner pour moi. C'est pour la liste affichée sur cliquez et reste en vie. Il est caché lorsqu'une autre liste est cliqué.

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

j'ai trouvé qu'il y a quelques problèmes avec la dynamique popovers, de sorte
voici 2 solutions statique et dynamique des popovers:

première solution est d'utiliser la liste d'option triger:'focus'
mais cette option ne fonctionne pas sur certains appareils android

et la seconde:

$('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'));
});

Utiliser cette méthode pour masquer toutes les autres liste lorsque vous survolez ou cliquez sur un autre élément de liste pour l'ouvrir

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 que vous l'ajouter bootstrap.js et bootstrap.css de la page.
Espérons que cette aide.

Cheers!!
Suraj Kumar