Comment faire vivre les popovers Bootstrap lorsqu'ils sont survolés ?

Question

Comment faire vivre les popovers Bootstrap lorsqu'ils sont survolés ?

Demandé el 13 de Avril, 2013: Quand la question a-t-elle été
112324 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'utilise un popover Bootstrap pour créer une carte de survol affichant des informations sur l'utilisateur, et je la déclenche au passage de la souris sur un bouton. Je veux garder cette popover vivante pendant que la popover elle-même est survolée, mais elle disparaît dès que l'utilisateur cesse de survoler le bouton. Comment puis-je faire cela ?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

Demandé el 13 de Avril, 2013 par vikas devde

Answer 1

5 Réponses

Answer 2

196voto

OkezieE Points 373

Testez avec l'extrait de code ci-dessous :

Petite modification (à partir de la solution fournie par vikas) pour convenir à mon cas d'utilisation.

Ouverture du popover au survol du bouton popover
Garder le popover ouvert lors du survol de la boîte popover
Fermez le popover lorsque vous quittez la souris, que ce soit pour le bouton popover ou pour la boîte popover.

$(".pop").popover({ trigger: "manual", html: true, animation: false }) .on("mouseenter", function() { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function() { $(_this).popover('hide'); }); }).on("mouseleave", function() { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); });

<!DOCTYPE html> <html>

<head> <link data-require="bootstrap-css@" data-semver="3.2.0" rel="stylesheet" href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script data-require="jquery@" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

<link rel="stylesheet" href="style.css" />

</head>

<body> <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2> <p class='text-muted'>KISS = Keep It Simple S....</p>

<p class='text-primary'>Goal:</p> <ul> <li>Open popover on hover event for the popover button</li> <li>Keep popover open when hovering over the popover box</li> <li>Close popover on mouseleave for either the popover button, or the popover box.</li> </ul>

<button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>" data-original-title="" title=""> HOVER OVER ME </button> <br><br> <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>" data-original-title="" title=""> HOVER OVER ME... Again! </button><br><br> <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>" data-original-title="" title=""> Okay one more time... ! </button> <br><br> <p class='text-info'>Hope that helps you... Drove me crazy for a while</p> <script src="script.js"></script> </body>

</html>

Répondu el 30 de Octobre, 2013 par OkezieE (373 Points )

Answer 3

85voto

vikas devde Points 2036

J'ai trouvé une autre solution à ce problème... voici le code

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

Répondu el 1 de Août, 2013 par vikas devde (2036 Points )

Answer 4

28voto

Wojtek Kruszewski Points 1659

Voici mon point de vue : http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Parfois, lors du déplacement de la souris du déclencheur de la popover au contenu de la popover. en diagonale si vous survolez les éléments ci-dessous. Je voulais gérer ce genre de situation : tant que vous atteignez le contenu du popover avant que le délai d'attente ne se déclenche, vous êtes en sécurité (le popover ne disparaît pas). Il faut delay option.

Ce hack remplace essentiellement le Popover leave mais appelle la fonction originale (qui lance le timer pour cacher le popover). Ensuite, il attache un écouteur unique à la fonction mouseenter de l'élément de contenu popover.

Si la souris entre dans le popover, la minuterie est effacée. Ensuite, il se met à l'écoute de mouseleave sur le popover et s'il est déclenché, il appelle la fonction leave d'origine pour qu'il puisse démarrer le timer hide.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Répondu el 2 de Septembre, 2013 par Wojtek Kruszewski (1659 Points )

Answer 5

20voto

Cu Lý Points 211

Je pense qu'un moyen facile serait le suivant :

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

De cette façon, le popover est créé à l'intérieur de l'élément cible lui-même. Ainsi, lorsque vous déplacez votre souris sur le popover, il se trouve toujours au-dessus de l'élément. Bootstrap 3.3.2 fonctionne bien avec cette méthode. Les versions plus anciennes peuvent avoir des problèmes avec l'animation, vous pouvez donc désactiver "animation:false".

Répondu el 27 de Janvier, 2015 par Cu Lý (211 Points )

Answer 6

15voto

David Chase Points 1406

J'ai utilisé le déclencheur réglé sur hover et a donné le jeu de conteneurs à la #element et enfin l'ajout d'un placement de la box a right .

Cela devrait être votre configuration :

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

y #example besoins en css position:relative; Vérifiez le jsfiddle ci-dessous :

https://jsfiddle.net/9qn6pw4p/1/

Publié sur

Ce violon a deux liens qui fonctionnent sans problème. http://jsfiddle.net/davidchase03/FQE57/4/

Répondu el 13 de Avril, 2013 par David Chase (1406 Points )

Comment faire vivre les popovers Bootstrap lorsqu'ils sont survolés ?

Réponses

Publié sur

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment faire vivre les popovers Bootstrap lorsqu'ils sont survolés ?

Réponses

Publié sur

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: