web-dev-qa-db-fra.com

Bootstrap 3 Popover: affichage au survol ET au clic, alias. Pin a Popover

Faire apparaître un popover avec le déclencheur hover fonctionne bien.

Faire apparaître un popover avec le déclencheur click fonctionne très bien.

Maintenant, comment puis-je faire en sorte que le popover apparaisse lorsque l'image de déclenchement est survolée, mais si l'utilisateur clique sur l'image, annule le survol et initie un basculement de clic? En d'autres termes, le survol montre le popover et en cliquant sur "épingle" le popover.

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 l'initialisation popover, encore plus ennuyeux:

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

D'après ce que j'ai vu jusqu'à présent, il semble probable que la solution soit un ensemble complexe agréable d'appels popover('show'), popover('hide') et popover('toggle'), mais mon javascript/jQuery-foo n'est pas à la hauteur de la tâche.

MODIFIER:

En utilisant le code fourni par @hajpoj comme base, j'ai ajouté une fonction pour écouter l'événement hidden.bs.popover Pour essayer de réactiver les événements mouseenter et mouseleave après avoir déclenché l'événement click, mais bien qu'il fasse le ' planer à nouveau, ça tue le 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)
});
javascriptjquerytwitter-bootstrappopover
16
stk11067

Modifier:

Voici une solution mise à jour basée sur votre commentaire. Il ne reste pas dans un état de "clic" mais revient à l'état de vol stationnaire.

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

Ancien:

Je pense que c'est ce que vous recherchez:

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 ouvrez/fermez manuellement le popover sur les événements mouseenter et mouseleave, mais une fois que quelqu'un clique sur le popover pour la première fois, vous supprimez ces gestionnaires d'événements et ajoutez un nouveau gestionnaire sur l'événement click qui bascule le popover.

Modifier: un autre code js. code plus simple, mais il y a un petit blip visuel 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');
    });
18
hajpoj

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>
5
bart

Voici une popover/info-bulle hybride qui pourrait vous donner la fonctionnalité que vous recherchez pour les deux options, bascule sur le clic et le survol):

violon popover/info-bulle hybride

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
mikesi2

Voici la façon dont j'ai accompli la fonctionnalité de vol stationnaire/pin en utilisant 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 cela fonctionnera dans tous les scénarios, mais cela a fonctionné dans le mien. Grand merci à @hajpoj et @Trevor pour l'inspiration.

JSFiddle: https://jsfiddle.net/5m2ob3yf/ (ne fonctionne pas encore, mais vous pouvez obtenir l'essentiel).

1
BtLutz