Bootstrap 3 Popover: affichage sur hover ET sur click, aka. Épingler un popover

Faire une liste apparaît avec les passez déclencheur fonctionne très bien.

Faire une liste apparaît avec les cliquez sur déclencheur fonctionne très bien.

Maintenant, comment dois-je aller sur la liste apparaissent lorsque le déclenchement de l'image est survolé, mais alors, si l'utilisateur clique sur l'image, d'annuler le vol stationnaire et de lancer un clic bascule? En d'autres termes, planant montre la liste et en cliquant sur "pins" de la liste.

Le HTML est assez standard:

<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>

Et la liste d'initialisation, même les plus ennuyeux:

$(function () { 
    $("[rel=popover]").popover();   
});

De ce que j'ai vu jusqu'à présent, il semble probable que la solution est un joli ensemble complexe de popover('show')popover('hide')et popover('toggle') des appels, mais mon javascript /jQuery-foo n'est pas à la hauteur.

EDIT:

Utilisant le code fourni par @hajpoj comme base, j'ai ajouté une fonction pour écouter la hidden.bs.popover événement pour essayer de le ré-activer le mouseenter et mouseleave après le déclenchement de l'événement de clic, mais bien qu'il ne faire le "hover" travailler de nouveau, il tue les clic...

var $btn2 = $('#btn2');

    var enterShow = function() {
        $btn2.popover('show');
    };

    var exitHide = function() {
        $btn2.popover('hide');
    }

    $btn2.popover({trigger: 'manual'})
            .on('mouseenter', enterShow)
            .on('mouseleave', exitHide)
            .one('click', function() {
                   $btn2.off('mouseenter', enterShow)
                        .off('mouseleave', exitHide)
                        .on('click', function() {
                            $btn2.popover('toggle');
                        });
            });

$('#btn2').on('hidden.bs.popover', function () {
  $btn2.on('mouseenter', enterShow)
       .on('mouseleave', exitHide)
});

source d'informationauteur stk11067

  1. 15

    Edit:

    Heres une mise à jour des solutions basées hors de votre commentaire. Il ne reste pas un "clic" de l'état, mais retourne à l'état de pointage.

    jsfiddle: http://jsfiddle.net/hajpoj/JJQS9/15/

    html:

    <a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

    js:

    var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

    Vieux:

    Je crois que c'est ce que vous cherchez:

    http://jsfiddle.net/JJQS9/1/

    html:

    <a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

    js:

    var $btn2 = $('#btn2');

var enterShow = function() {
    $btn2.popover('show');
};

var exitHide = function() {
    $btn2.popover('hide');
}

$btn2.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .one('click', function() {
            $btn2.off('mouseenter', enterShow)
                    .off('mouseleave', exitHide)
                    .on('click', function() {
                        $btn2.popover('toggle');
                    });
        });

    Fondamentalement, vous manuellement pop ouvrir/fermer la fenêtre pop-over sur le mouseenter et mouseleave événements, mais une fois que quelqu'un clique sur la liste pour la première fois, vous supprimez ces gestionnaires d'événements, et d'ajouter un nouveau gestionnaire, sur la click événement qui fait basculer la liste.

    Edit:
    une solution de rechange code js. plus simple de code, mais il y a un petit visuel blip lorsque vous l'utilisez:
    http://jsfiddle.net/hajpoj/r3Ckt/1/

    var $btn2 = $('#btn2');

$btn2.popover({trigger: 'hover'})
    .one('click', function() {
        $btn2.popover('destroy')
            .popover({ trigger: 'click'})
            .popover('show');
    });
  2. 4

    Très simple, ajoutez hover à data-trigger comme suit:

    <span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>
  3. 4

    Voici un hybride liste/info-bulle qui pourrait vous donner la fonctionnalité que vous êtes à la recherche pour les deux options, permet de basculer sur cliquez et faites glisser):

    Hybride liste/info-bulle violon

    HTML:

    <button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What's hidden?</button>

    JS:

    var $tip1 = $('#tip1');

$tip1.tooltip({trigger: 'hover'})
  .on('click', function() {
    $tip1.tooltip('toggle');
});
  4. 1

    Voici le chemin que j'ai accompli au hover/le fonctionnement de la broche à l'aide de Bootstrap et JQuery:

    $(function () {
    var clicked = false;

    var onLeave = function() {
        if (!clicked) { $(this).popover('hide'); }
    };

    var onEnter = function () {
        if (!clicked) { $(this).popover('show'); }
    };

    var clickToggle = function() {
        if (clicked) { $(this).popover('hide'); }
        clicked = !clicked;
    }
    $('.popover-div-class').popover({ trigger: "manual"})
        .on('mouseenter', onEnter)
        .on('mouseleave', onLeave)
        .on('click', clickToggle);
});

    Je ne suis pas sûr que ça marchera dans tous les scénarios, mais il a travaillé dans la mine. Big dédicace à @hajpoj et @Trevor pour l'inspiration.

    JSFiddle: https://jsfiddle.net/5m2ob3yf/ (Ne fonctionne pas encore, mais vous pouvez obtenir le gist).