it-swarm.com.de

Twitter Bootstrap Popover Trigger: Wie werden mehrere Trigger gesetzt?

Ich versuche, http://Twitter.github.io/bootstrap/javascript.html#popovers zu verwenden. Ich kann den Trigger auf einen von click | hover | focus | manual setzen. Gibt es eine Möglichkeit, mehrere Trigger festzulegen? Ich möchte schweben und fokussieren.

12

Dies ist leicht genug, indem Sie Ihre eigenen Event-Handler definieren und das Popover über die API anzeigen/ausblenden:

HTML:

<input id='no-popover' type='text' />
<input id='has-popover' type='text' placeholder='hover or focus me' />

JavaScript:

var showPopover = function () {
    $(this).popover('show');
}
, hidePopover = function () {
    $(this).popover('hide');
};

$('#has-popover').popover({
    content: 'Popover content',
    trigger: 'manual'
})
.focus(showPopover)
.blur(hidePopover)
.hover(showPopover, hidePopover);

Beispiel: http://jsfiddle.net/Xqx8P/

22
Andrew Whitaker

Beim Initialisieren Ihres Popovers können Sie mehrere Trigger übergeben. Trennen Sie sie mit einem Leerzeichen.

   var options = {
       trigger: 'hover focus'
    }

    $('#has-popover').popover(options);
10
Denis Ivanov

Im Zusammenhang mit dieser Frage:

wenn jemand Bootstraps Popover mit AngularJS verwendet (mit Angular-UI ) und definieren möchte, dass ein Popover aktiviert wird "mit der Maus" eingeben, aber deaktiviert gemäß einem oder Weitere Ereignisse kann dieser Code hilfreich sein:

app.config(function ($tooltipProvider) {
    // when the user either leaves the element or clicks on it, the tooltip/popover will go off.
    $tooltipProvider.setTriggers({
        'mouseenter': 'mouseleave click',
        'click': 'click',
        'focus': 'blur'
    });
}
2
Clint Eastwood

Die Referenz dessen, was von @Denis Ivanov richtig erwähnt wurde 

Bootstrap 3.0 ( http://getbootstrap.com/javascript/#popovers )

Wie Popover ausgelöst wird - klicken Sie auf | schweben | Fokus | Handbuch. Sie können Mehrere Auslöser passieren; Trennen Sie sie mit einem Leerzeichen. Standardeinstellung ist "Klick".

0
Alireza Fattahi

Wenn Sie Datenattribute in Ihrem <a>-Tag zum Konfigurieren des Popovers verwenden, können Sie einfach beide Werte wie folgt eingeben: 

<a data-trigger="hover focus">

Funktioniert für mich mit Bootstrap 2. 

0
Maria Blair