Wie kann ich Bootstrap-Popover am Leben erhalten, während das Popover schwebt?

Ansicht dieser Arbeit code in Plunker

Kleine änderung (Aus der Lösung von vikas) für meinen Anwendungsfall.

1. Öffnen popover auf hover-Ereignis für das popover-Taste

2. Halten popover öffnen, wenn die Maus über die popover-Feld

3. In der Nähe popover auf mouseleave für die popover-Taste oder die popover-Feld.

$(".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);
});

Mit ihm spielen in Plunker

InformationsquelleAutor der Antwort OkezieE

Hier ist mein nehmen: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Manchmal beim verschieben der Maus von popover-trigger tatsächlichen popover-content Diagonal, Sie den Mauszeiger über die Elemente unten. Ich wollte solche Situationen – so lange, wie Sie erreichen popover Inhalt vor dem timeout feuert, bist du sicher (das popover wird nicht verschwinden). Es erfordert delay option.

Dieser hack im Grunde überschreibt Popover leave Funktion, sondern ruft die original - (Start-timer zum ausblenden des popover). Dann misst es eine einmalige Zuhörer mouseenter popover-content-element.

Wenn die Maus betritt den popover, wird der timer deaktiviert ist. Dann dreht hört es sich an mouseleave auf popover und wenn es ausgelöst wird, ruft es die ursprüngliche Funktion verlassen, so dass es beginnen konnte zu verstecken timer.

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

InformationsquelleAutor der Antwort Wojtek Kruszewski

Ich denke, eine einfache Möglichkeit wäre diese:

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

Diese Weise wird das popover erstellt im target-element selbst. also, wenn Sie mit der Maus über die popover, es ist immer noch über das element. Bootstrap 3.3.2 funktioniert das auch mit diesem. Ältere version haben einige Probleme mit der animation, so möchten Sie vielleicht deaktivieren Sie "animation": false,"

InformationsquelleAutor der Antwort Cu Lý

Hier ist eine Lösung, die ich erarbeitet, das scheint gut zu funktionieren, aber auch damit Sie mit den normalen Bootstrap-Implementierung für drehen auf allen popovers.

Original fiddle: https://jsfiddle.net/eXpressive/hfear592/

Portiert auf diese Frage:

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

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

InformationsquelleAutor der Antwort eXpressiveDesign

Die gewählte Antwort funktioniert aber fehl, wenn das popover wird initialisiert mit der body als der container.

$('a').popover({ container: 'body' });

Einer Lösung auf Basis der gewählten Antwort wird der folgende code muss gesetzt werden, bevor mit der popover.

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);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

Die änderung ist minimal mit self.$tip statt Traversierung des DOM erwartet Sie das popover zu sein, immer ein Geschwister des Elements.

InformationsquelleAutor der Antwort Rubens Mariuzzo

Diese Lösung funktionierte gut für mich: (nun ist seine kugelsichere) 😉

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'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

InformationsquelleAutor der Antwort Johannes Ferner

Ich bin damit einverstanden, dass der beste Weg ist es, die eine gegeben durch: David Chase, Cu Ly und anderen, dass der einfachste Weg, dies zu tun, ist die Verwendung der container: $(this) - Eigenschaft wie folgt:

$(selectorString).each(
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
);

Ich möchte darauf hinweisen, dass hier das popover in diesem Fall erbt alle Eigenschaften des aktuellen Elements. So, zum Beispiel, wenn dies für eine .btn element(bootstrap), Sie nicht in der Lage, wählen Sie text innerhalb des popover. Wollte nur festhalten, dass seit ich verbrachte einige Zeit schlug meinen Kopf auf diese.

InformationsquelleAutor der Antwort forumulator

Wird es mehr flexible mit hover():

$(".my-popover").hover(
    function() {  //mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  //mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)

InformationsquelleAutor der Antwort Grey Li