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

$('li').popover({
    title: 'My title',
    content: 'My content'
})
.on('show.bs.popover', function() {
    if (window._bsPopover) {
        $(window._bsPopover).popover('hide')
    }
    window._bsPopover= this;
})
.on('hide.bs.popover', function() {
   window._bsPopover= null; // see Peter Jacoby's comment
});

Answer 2

J'ai utilisé une fonction pour mon contenu, j'ai donc (en coffeescript) :

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

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

Answer 3

J'ai utilisé une fonction pour mon contenu et elle fonctionne correctement.

$(function () {                     
    $('[data-toggle="popover"]').click(function(){
        $(this).popover('toggle');
        $('[data-toggle="popover"]').not(this).popover('hide'); //all but this
    });
})

Answer 4

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

Remplacez simplement le clic par le survol ou l'entrée de la souris en fonction de vos besoins.

Answer 5

Cela fonctionne très bien si vous souhaitez n'avoir qu'un seul popover ouvert à la fois, ouvert et fermé par un clic (la position du curseur n'a pas d'importance) :

$('[data-toggle="popover"]').popover({  html: true }).bind("click", function(){ 

  if(!$(this).parent().children("a").first().is(":hover"))
   $( '[data-toggle="popover"]').popover("hide"); 
  else
   $( '[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide"); 

 return false;  
});

Il est important que chaque popover ait un parent individuel, tel que

<ul> <li> <popover> </li> <li> <popover> </li> </ul>

HTML :

 <li>  
  <a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a> 
 </li>