it-swarm.com.de

Wie kann ich Twitter Bootstrap Popover geöffnet halten, bis sich meine Maus darin befindet?

Ich habe einen Link, der die Twitter Bootstrap Popover-Version 1.3.0 verwendet, um Informationen anzuzeigen. Diese Informationen enthalten einen Link, aber jedes Mal, wenn ich meine Maus vom Link zum Popover bewege, verschwindet der Popover einfach.

Wie kann ich den Popover lange genug offen halten, damit sich die Maus darin bewegen kann? Wenn dann die Maus aus dem Link und dem Popover entfernt wird, verstecken Sie sie.

Oder gibt es ein anderes Plugin, das das kann?

50
Tinyfool

Jetzt wechsle ich einfach zu webuiPopover, es funktioniert einfach.

0
Tinyfool

Mit bootstrap (getestet mit Version 2) habe ich folgenden Code herausgefunden: 

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });

Der wichtigste Punkt ist das Überschreiben der Vorlage mit Mouseleave () - Enabler. Ich hoffe das hilft.

31
marchello

Um das Beispiel von Marchello zu ergänzen: Wenn der Popover verschwinden soll, wenn der Benutzer die Maus vom Popover und source-Link wegbewegt, probieren Sie dies aus.

var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});
26
Kevin Lawrence

Bootstrap 3 und höher

Einfach, verwenden Sie einfach die Option container und haben Sie es als das Element, das das Popover aufruft. Auf diese Weise ist das Popover ein Kind des Elements, das es aufruft. Daher schweben Sie technisch immer noch über dem übergeordneten Element, da das untergeordnete Popover dazu gehört.

Zum Beispiel:

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

jQuery:

Ausführen einer $.each()-Schleife über jedes meiner Elemente, das ein Popover an das übergeordnete Element gebunden werden soll. In diesem Fall hat jedes Element die Klasse pop.

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

CSS:

Dieser Teil ist optional, wird aber empfohlen. Es verschiebt den Popover um 7 Pixel nach unten, um den Zugriff zu erleichtern.

.pop .popover {
    margin-top:7px;
}

ARBEITSDEMO

26
Fizzix

Dies ist ein bisschen hackig, aber ausgehend von marchellos Beispiel habe ich Folgendes getan (keine Vorlage erforderlich):

$(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).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);
});

Die Variable setTimeout stellt sicher, dass vom Trigger-Link zum Popover Zeit verbleibt.

19
clem

Dieses Problem in der Bootstrap github repo behandelt dieses Problem. fett wies auf die experimentelle Platzierung "oben/unten/links/rechts" hin. Es funktioniert ziemlich gut, aber Sie müssen sicherstellen, dass der Popover-Auslöser nicht statisch mit css positioniert ist. Andernfalls wird der Popover nicht an der gewünschten Stelle angezeigt.

HTML:

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span> 

CSS:

/*CSS */
.myClass{ position: relative;}

JS:

$(function(){
  $('.myClass').popover({placement: 'in top'});
});  
11
stevendaniels

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

Wenn Sie die Maus vom Popover-Auslöser zum tatsächlichen Popover-Inhalt diagonal bewegen, bewegen Sie den Mauszeiger über die unten stehenden Elemente. Ich wollte mit solchen Situationen umgehen - solange Sie Popover-Inhalte erreichen, bevor das Timeout ausgelöst wird, sind Sie sicher (der Popover wird nicht verschwinden). Es erfordert die Option delay.

Dieser Hack überschreibt grundsätzlich die Popover-Funktion leave, ruft jedoch das Original auf (das den Timer startet, um den Popover auszublenden). Dann wird ein einmaliger Listener an mouseenter Popover-Inhaltselemente angehängt.

Wenn die Maus in das Popover-Fenster kommt, wird der Timer gelöscht. Dann wird beim Popover auf mouseleave zugegriffen und wenn es ausgelöst wird, ruft es die ursprüngliche Verlassen-Funktion auf, damit der Timer ausgeblendet werden kann.

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

Die Lösung hat für uns bei Bootstrap 3 funktioniert.

var timeoutObj;
$('.list-group a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var _this = this;
    setTimeout(function() {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
}); 
4
Opcrat

Folgendes habe ich gemacht:

e = $("a[rel=popover]")
e.popover({
    content: d, 
    html:true, 
    trigger:'hover',
    delay: {hide: 500},
    placement: 'bottom',
    container: e, 
})

Dies ist eine sehr einfache und ehrliche Lösung für dieses Problem, die ich durch einen Blick in den Bootstrap-Tooltip-Code herausgefunden habe. In Bootstrap v3.0.3 ist hier die Codezeile, die mir aufgefallen ist:

this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

wenn also die container-Eigenschaft des Popovers definiert ist, erhält das Popover appendTo () das Element anstelle von insertAfter () das ursprüngliche Element. Alles, was Sie tun müssen, ist, das Element als Containereigenschaft zu übergeben. Aufgrund von appendTo () wird der Popover Teil des Links, an den das Hover-Ereignis gebunden wurde. Dadurch bleibt der Popover geöffnet, wenn die Maus darauf bewegt wird.

1
vinit

Zum Schluss löse ich dieses Problem. Popover verschwinden heißt, weil Popover nicht untergeordneter Knoten der Verknüpfung ist, sondern untergeordneter Knoten des Hauptteils.

So beheben Sie es ist einfach, ändern Sie bootstrap-twipsy.js Inhalt:

.prependTo(document.body) in .prependTo(this.$element) ändern

und beheben Sie das Positionsproblem durch Änderung.

und einige verwenden Link Tiger Popover wird auch Popover mit Link verursachen, so fügen Sie einen Bereich enthalten Link, so Problem gelöst.

1
Tinyfool

Das funktioniert für mich unter BootStrap 3 :

el.popover({
  delay: {hide: 100}
}).on("shown.bs.popover", function(){
  el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){
    setTimeout(function(){
      el.popover("hide");
    }, 100);
  });
}).on("hide.bs.popover", function(ev){
  if(el.data("bs.popover").tip().is(":hover"))
    ev.preventDefault();
});
1
ShogunPanda

Dies ist eine Version der Lösung von Wojtek Kruszewski. Diese Version behandelt das Popover-Symbol, wenn die Maus zum Auslösen zurückkehrt. http://jsfiddle.net/danielgatis/QtcpD/

(function($) {
      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) {
          var current = $(obj.currentTarget);
          var container = current.siblings(".popover");
          container.on("mouseenter", function() {
            clearTimeout(self.timeout);
          });
          container.on("mouseleave", function() {
            originalLeave.call(self, self);
          });
        }
      };

      var originalEnter = $.fn.popover.Constructor.prototype.enter;
      $.fn.popover.Constructor.prototype.enter = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        clearTimeout(self.timeout);
        if (!$(obj.currentTarget).siblings(".popover:visible").length) {
          originalEnter.call(this, obj);
        }
      };
    })(jQuery);
1
danielgatis

Ich habe die Lösungen von @Wotjek Kruszewski und @danielgatis ausprobiert, aber für mich funktionierte nichts. Vorbehalt: Ich verwende Bootstrap v2.1.0, nicht v3. Diese Lösung ist in Coffeescript (warum verwenden die Leute immer noch einfaches Javascript? =).

(($) ->
  originalLeave = $.fn.popover.Constructor::leave
  $.fn.popover.Constructor::leave = (e) ->
    self = $(e.currentTarget)[@type](@_options).data(@type)
    originalLeave.call @, e

    if e.currentTarget
      container = $(".popover")
      container.one "mouseenter", ->
        clearTimeout self.timeout

        container.one "mouseleave", ->
          originalLeave.call self, e
) jQuery
1

Am Ende der von @stevendaniels verknüpften Konversation befindet sich ein Link zu einer Twitter-Bootstrap-Erweiterung namens BootstrapX - clickover von Lee Carmichael. Dadurch wird das Popover von einem übergroßen Tooltip in ein interaktives Steuerelement geändert, das durch Klicken auf eine andere Stelle im Formular, eine Schaltfläche zum Schließen oder nach einem Timeout geschlossen werden kann. Es ist einfach zu bedienen und hat für das Projekt, in dem ich es brauchte, sehr gut funktioniert. Einige Beispiele für seine Verwendung finden Sie hier hier .

0
Miika L.

Ich mochte keine der Antworten, die ich gefunden habe. Daher kombinierte ich einige Antworten, die nah genug waren, um den folgenden Code zu erstellen. Damit können Sie am Ende jedes Mal einfach $(selector).pinnablepopover(options); eingeben, wenn Sie einen Popover mit Pinnable-Funktion erstellen möchten.

Code, der die Dinge einfach macht:

$.fn.popoverHoverShow = function ()
{
    if(this.data('state') !== 'pinned')
    {
        if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden')))
        {
            this.popover('show');
        }
    }
};
$.fn.popoverHoverHide = function ()
{
    if (this.data('state') !== 'pinned')
    {
        var ref = this;
        this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100))
        .on('mouseenter', function(){ clearTimeout($(this).data('timeout')) })
        .on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) });
        this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) });
    }
};
$.fn.popoverClickToggle = function ()
{
    if (this.data('state') !== 'pinned')
    {
        this.data('state', 'pinned');
    }
    else
    {
        this.data('state', 'hover')
    }
};
$.fn.pinnablepopover = function (options)
{
    options.trigger = manual;
    this.popover(options)
    .on('mouseenter', function(){ $(this).popoverHoverShow() })
    .on('mouseleave', function(){ $(this).popoverHoverHide() })
    .on('click', function(){ $(this).popoverClickToggle() });
};

Verwendungsbeispiel:

$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});
0
Timothy Zorn

Nachdem ich alle gesehen habe Antwort, die ich gemacht habe, denke ich, dass es hilfreich sein wird. Sie können alles verwalten, was Sie brauchen .. Viele Antworten machen keine Verzögerung der Show, ich verwende dies. Seine Arbeit ist sehr nett in meinem Projekt
/****** /************************************** ************************** /

<div class='thumbnail' data-original-title=''  style='width:50%'>    
 <div id='item_details' class='popper-content hide'>
    <div>
        <div style='height:10px'> </div>
        <div class='title'>Bad blood </div>
        <div class='catagory'>Music </div>
    </div>

  </div>
  HELLO POPOVER
</div>"

/ **************** SCRIPT-CODE ******************************

$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
    return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;

$('.thumbnail').each(function () {
    $(this).popover('hide');
});
setTimeout(function(){
    if ($(_this).is(':hover')) {
        $(_this).popover("show");
    }
},1000);
$(".popover").on("mouseleave", function () {
    $('.thumbnail').each(function () {
        $(this).popover('hide');
    });
    $(_this).popover('hide');
 }); }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100); });
0