Bootstrap Popover beim Hover anstelle von Click anzeigen / verschwinden lassen

181

Ich erstelle eine Website mit Bootstraps Popover und kann nicht herausfinden, wie das Popover beim Hover angezeigt wird, anstatt beim Klicken.

Ich möchte nur ein Popover anzeigen lassen, wenn jemand über einen Link schwebt, anstatt darauf zu klicken, und das Popover verschwindet, wenn er sich entfernt. In der Dokumentation heißt es, dass entweder das Datenattribut oder jquery verwendet werden kann. Ich würde es viel lieber mit jquery machen, da ich mehrere Popover habe.

javascript jquery twitter-bootstrap Muhambi
quelle
20
Tipp: Hover saugt an Touch-Geräten. Wenn Sie die Benutzerfreundlichkeit für Touchscreens sicherstellen möchten, binden Sie die Funktionalität nicht an den Hover.
Jørgen R

Antworten:

374

Setzen Sie die triggerOption des Popovers auf hoveranstelle von click, was die Standardeinstellung ist .

Dies kann mithilfe der folgenden data-*Attribute im Markup erfolgen:

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

Oder mit einer Initialisierungsoption:

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

Hier ist eine DEMO .

João Silva
quelle
Danke für die Antwort. Wie setze ich eine Triggeroption für diesen Code? <script> $(function () { $("#popover").popover(); }); </script>
Muhambi
8
@ Jake: Verwenden $("#popover").popover({ trigger: "hover" });.
João Silva
Vielen Dank! Aus irgendeinem Grund musste ich sowohl den Datenauslöser als auch die JS-Initialisierung implementieren.
Anthony
Kann mir jemand helfen zu verstehen, welche Option, JS-Initialisierung oder Datenattribute die bessere ist? Selbst wenn ich Datenattribute verwende, müsste ich $ ("# popover") aufrufen. Popover (); von meinem JavaScript.
Bailey
@Bailey Es hängt davon ab, wie Ihre Codierungsregeln lauten und ob Sie mit bestimmten Codierungsstandards arbeiten, und dann von Ihren persönlichen Vorlieben. Wenn ich mir die beiden anschaue, ziehe ich es vor, die Triggeroption innerhalb der Funktion popover () anzuvisieren. Scheint mir besser lesbar.
Coderhi
33

Ich möchte hinzufügen, dass Sie aus Gründen der Barrierefreiheit den Fokusauslöser hinzufügen sollten:

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

Calexo
quelle
Kein Klick für diese Anfrage - schauen Sie sich diesen Titel des Beitrags an
Albuquerque Web Design
14

Wenn Sie den Popover selbst bewegen möchten, müssen Sie einen manuellen Auslöser verwenden.

Das habe ich mir ausgedacht: 

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

Die von Ihnen beschriebene Funktionalität kann einfach mit dem Bootstrap-Tooltip erreicht werden.

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

Rufen Sie dann die Funktion tooltip () für das Element auf.

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

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

VforVitamin
quelle
1

Nachdem ich einige dieser Antworten ausprobiert hatte und festgestellt hatte, dass sie mit mehreren Links nicht gut skaliert werden können (zum Beispiel erfordert die akzeptierte Antwort eine Abfragezeile für jeden Link, den Sie haben), stieß ich auf einen Weg, der nur minimalen Code erfordert, um zu funktionieren, und es scheint auch perfekt zu funktionieren, zumindest auf Chrome.

Sie fügen diese Zeile hinzu, um sie zu aktivieren:

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

Und diese Einstellungen zu Ihren Ankerlinks:

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

Sehen Sie es hier in Aktion . Ich verwende dieselben Importe wie die akzeptierte Antwort, sodass es bei älteren Projekten einwandfrei funktionieren sollte.

Peter
quelle