Fai apparire / scompare Bootstrap Popover su Hover anziché su Click

181

Sto costruendo un sito Web con Bootstrap's Popover e non riesco a capire come far apparire il popover al passaggio del mouse anziché con un clic.

Tutto quello che voglio fare è far apparire un popover quando qualcuno passa sopra un collegamento invece di fare clic su di esso e per far scomparire il popover quando si allontanano. La documentazione dice che è possibile usare l'attributo data o jquery. Preferirei di gran lunga farlo con jquery poiché ho più popover.

javascript jquery twitter-bootstrap

— Muhambi
fonte

20

Suggerimento: il passaggio del mouse fa schifo sui dispositivi touch. Se si desidera garantire l'usabilità per i touchscreen, non vincolare la funzionalità al passaggio del mouse.

— Jørgen R,

374

Impostare l' triggeropzione del popover su hoverinvece di click, che è quella predefinita .

Questo può essere fatto usando entrambi gli data-*attributi nel markup:

<a id="popover" data-trigger="hover">Popover</a>

O con un'opzione di inizializzazione:

$("#popover").popover({ trigger: "hover" });

Ecco una DEMO .

— João Silva
fonte

Grazie per la risposta. Come imposto un'opzione di trigger su questo codice? <script> $(function () { $("#popover").popover(); }); </script>

— Muhambi,

8

@Jake: utilizzare $("#popover").popover({ trigger: "hover" });.

— João Silva,

Grazie! per qualche motivo avevo bisogno di implementare sia l'innesco dei dati sia l'inizializzazione di JS.

— Anthony,

Qualcuno può aiutarmi a capire qual è l'opzione migliore, l'inizializzazione JS o gli attributi dei dati? Anche se uso gli attributi dei dati, dovrei comunque chiamare $ ("# popover"). Popover (); dal mio JavaScript.

— Bailey

@Bailey Dipende da quali sono le tue regole di codifica e se stai lavorando con particolari standard di codifica, e quindi dalle preferenze personali. Osservando i due, preferisco scegliere come target l'opzione trigger all'interno della funzione popover (). Mi sembra più leggibile.

— Coderhi,

33

Vorrei aggiungere che per l'accessibilità, penso che dovresti aggiungere l'attivazione del focus:

vale a dire $("#popover").popover({ trigger: "hover focus" });

— Calexo
fonte

Nessun clic per questa richiesta - guarda questo titolo del post

— Albuquerque Web Design

14

Se vuoi passare anche il popover stesso devi usare un grilletto manuale.

Questo è quello che mi è venuto in mente:

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

— Johannes Ferner
fonte

6

La funzionalità, che hai descritto, può essere facilmente raggiunta usando la descrizione del Bootstrap.

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

Quindi chiama la funzione tooltip () per l'elemento.

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

— VforVitamin
fonte

1

Dopo aver provato alcune di queste risposte e aver scoperto che non si adattano bene a più collegamenti (ad esempio la risposta accettata richiede una riga di jquery per ogni collegamento che hai), mi sono imbattuto in un modo che richiede un codice minimo per funzionare, e sembra anche funzionare perfettamente, almeno su Chrome.

Aggiungi questa linea per attivarla:

$('[data-toggle="popover"]').popover();

E queste impostazioni per i tuoi collegamenti di ancoraggio:

data-toggle="popover" data-trigger="hover"

Vedilo in azione qui , sto usando le stesse importazioni della risposta accettata, quindi dovrebbe funzionare bene su progetti più vecchi.

— Peter
fonte