Twitter bootstrap 2.3.2 popover rimane aperto mentre si libra

Question

Ho un popover bottom-oriented che mi piacerebbe essere un po 'più tollerante del popover predefinito, che svanisce non appena il mouse lascia il grilletto.

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

li ho a rimanere aperti fino a quando il mouse si trova sopra il grilletto o il contenuto popover, ma questo è difficile per l'utente, in quanto hanno avuto modo di topo dall'elemento grilletto per la freccia al contenuto senza lasciare quelle aree per interagire con il popover. Due soluzioni in mente, nessuna delle due sta funzionando:

1) l'opzione di ritardo dovrebbe farlo. aggiungendo delay: {hide: 500} alla chiamata popover lascia il popover aperto dopo che il mouse è partito, ma reinserendo il trigger o il popover prima che scompaia non dice a bootstrap di mantenere aperto il popover, quindi si allontana alla fine del timeout iniziale .

2) allargare l'elemento contenente la freccia in modo che il mouse passi dall'elemento di attivazione allo sfondo tra l'elemento di innesco e il popover in popover (il mouse non avrebbe mai lasciato il trigger/elemento). I seguenti lavori, tranne la freccia è disegnato con sovrapposizione confini CSS, in modo che il fondo non è trasparente: http://jsfiddle.net/HAZS8/

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

La soluzione è quella di hard-wire il passaggio del mouse e MouseLeave eventi con jQuery, o per sostituire la sovrapposizione-borders freccia con un'immagine. Correzioni migliori?

Answer 1

È possibile gestire i show e hide eventi per la 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/

Non sembra che ci sia qualcosa di built-in per la popover per le funzionalità voglio, quindi questo è quello che mi è venuto in mente :)

Ciò che è bello è che permette solo ai gestori di eseguire se davvero dovrebbero - se il popover è in realtà nascosto o effettivamente mostrato. Inoltre, ogni istanza di un popover è unica l'una dall'altra, quindi non c'è alcun trucco globale in corso.

Answer 2

Ho un approccio più generico a risolvere questo, che sto usando me stesso. Implica il sovraccarico della funzione hide del popover, controlla se il tooltip associato viene stazionato e reagisce in modo appropriato, invece di aggiungere tutto quello che gestisce l'impostazione di dati & html5.

(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); 

caricare questo dopo il vostro bootstrap & fonti jQuery.