Twitter bootstrap 2.3.2 popover reste ouvert pendant le vol stationnaire

Question

J'ai un survol orienté vers le bas que je voudrais être un peu plus indulgent que le survol par défaut, qui disparaît dès que la souris quitte le déclencheur.

$('#example').popover({ 
    html: true, 
    trigger: 'hover', 
    container: '#example', 
    placement: 'bottom', 
    content: function() { 
     return '<div class="box">here is some content</div>'; 
    } 
}); 

Je l'ai de rester ouvert aussi longtemps que la souris est sur la gâchette ou la teneur en popover, mais c'est difficile pour l'utilisateur, car ils ont à la souris de l'élément déclencheur de la flèche au contenu sans quitter ces zones afin d'interagir avec le popover. Deux solutions à l'esprit, aucune ne fonctionne:

1) l'option de délai doit le faire. ajouter delay: {hide: 500} à l'appel popover laisse le popover ouvert après le départ de la souris, mais ré-entrer dans le trigger elem ou le popover avant qu'il ne disparaisse ne dit pas bootstrap pour garder le popover ouvert, donc disparaît à la fin du timeout initial . 2) élargir l'élément contenant la flèche de sorte que la souris passe de l'élément déclencheur à l'arrière-plan entre l'élément déclencheur et le survol vers le survol (la souris n'aurait alors jamais quitté le déclencheur/l'élément). Les ouvrages suivants, à l'exception de la flèche est dessinée avec chevauchement des frontières CSS, de sorte que le fond non transparent: http://jsfiddle.net/HAZS8/

.popover.bottom .arrow { 
    left: 0%; 
    padding-left:50%; 
    padding-right:50%; 
} 

La solution consiste à disque à fil le passage de la souris et mouseLeave événements avec jquery, ou pour remplacer les bordures qui se chevauchent- flèche avec une image. De meilleures corrections?

Answer 1

Vous pouvez gérer les show et hide événements pour le popover:

$('#example').popover({ 
    html: true, 
    trigger: 'hover', 
    container: '#example', 
    placement: 'bottom', 
    content: function() { 
     return '<div class="box">here is some content</div>'; 
    }, 
    animation: false 
}).on({ 
    show: function (e) { 
     var $this = $(this); 

     // Currently hovering popover 
     $this.data("hoveringPopover", true); 

     // If it's still waiting to determine if it can be hovered, don't allow other handlers 
     if ($this.data("waitingForPopoverTO")) { 
      e.stopImmediatePropagation(); 
     } 
    }, 
    hide: function (e) { 
     var $this = $(this); 

     // If timeout was reached, allow hide to occur 
     if ($this.data("forceHidePopover")) { 
      $this.data("forceHidePopover", false); 
      return true; 
     } 

     // Prevent other `hide` handlers from executing 
     e.stopImmediatePropagation(); 

     // Reset timeout checker 
     clearTimeout($this.data("popoverTO")); 

     // No longer hovering popover 
     $this.data("hoveringPopover", false); 

     // Flag for `show` event 
     $this.data("waitingForPopoverTO", true); 

     // In 1500ms, check to see if the popover is still not being hovered 
     $this.data("popoverTO", setTimeout(function() { 
      // If not being hovered, force the hide 
      if (!$this.data("hoveringPopover")) { 
       $this.data("forceHidePopover", true); 
       $this.data("waitingForPopoverTO", false); 
       $this.popover("hide"); 
      } 
     }, 1500)); 

     // Stop default behavior 
     return false; 
    } 
}); 

DEMO:http://jsfiddle.net/L4Hc2/

Il ne semble pas qu'il ya quoi que ce soit intégré pour la popover pour la fonctionnalité que vous veux, donc c'est ce que je suis venu avec :)

Ce qui est bien, c'est qu'il permet seulement aux gestionnaires d'exécuter s'ils le devraient vraiment - si le popover est en réalité caché ou en train d'être montré. En outre, chaque instance d'un popover est unique les uns des autres, donc il n'y a pas de supercherie globale.

Answer 2

J'ai une approche plus générique pour résoudre celui-ci, que j'utilise moi-même. Cela implique de surcharger la fonction de masquage du popover, en vérifiant si l'info-bulle associée est survolée, et réagit de manière appropriée - plutôt que d'ajouter tout ce traitement de données & html5 de cet événement.

(function($) { 

    var oldHide = $.fn.popover.Constructor.prototype.hide; 

    $.fn.popover.Constructor.prototype.hide = function() { 
     if (this.options.trigger === "hover" && this.tip().is(":hover")) { 
      var that = this; 
      // try again after what would have been the delay 
      setTimeout(function() { 
       return that.hide.call(that, arguments); 
      }, that.options.delay.hide); 
      return; 
     } 
     oldHide.call(this, arguments); 
    }; 

})(jQuery); 

charge après ce fichier de démarrage & sources jQuery.