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

113

Ich verwende ein Bootstrap-Popover, um eine Hover-Karte mit Benutzerinformationen zu erstellen, und löse sie beim Mouseover einer Schaltfläche aus. Ich möchte dieses Popover am Leben erhalten, während das Popover selbst schwebt, aber es verschwindet, sobald der Benutzer aufhört, über der Schaltfläche zu schweben. Wie kann ich das machen?

$('#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>

Erweitern Sie das Snippet

jquery twitter-bootstrap popper.js

— vikas devde
quelle

du willst was am leben halten? Ich schwebe über dem Knopf und es blieb geöffnet?

— David Chase

Lesen Sie die letzte Zeile der Frage

— Vikas Devde

172

Testen Sie mit dem folgenden Code-Snippet:

Kleine Modifikation (aus der von vikas bereitgestellten Lösung) für meinen Anwendungsfall.

Öffnen Sie das Popover-on-Hover-Ereignis für die Popover-Schaltfläche
Lassen Sie das Popover geöffnet, wenn Sie mit der Maus über die Popover-Box fahren
Schließen Sie das Popover im Mausblatt entweder für die Popover-Schaltfläche oder für das 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);
  });

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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>

Erweitern Sie das Snippet

— OkezieE
quelle

Das funktioniert perfekt, ich habe bemerkt, dass ;in deiner Sekunde eine fehlt $(_this).popover("hide"). Aber danke, es war so einfach und sauber!

— Sündenbock17

3

Diese Antwort ist erstaunlich. Funktioniert hervorragend auf BS3 ab Mai 2015 ^^

— entartet

1

Ich habe es in einer Tabelle verwendet und container: 'body'zu den Optionen hinzugefügt , weil dadurch die Zellen verschoben wurden. Gute Antwort!

— Alexander Derck

Das Popover wird ausgeblendet, wenn Sie es eingeben und dann alle vor 300 ms zum Triggerelement zurückkehren. Um das Problem zu beheben, überprüfen Sie, ob BEIDES Popover und sein Auslöser: Hover sind, bevor Sie es in setTimeout ausblenden. Ich würde auch setTimeout und den gleichen Ansatz verwenden, um das Popover selbst zu entfernen, um das Flackern zu beheben.

— RZB

animation:falseStellen Sie sicher, dass das Flimmern behoben ist - überprüfen Sie den oben angegebenen Plunker-Link. Es funktioniert perfekt für mich.

— OkezieE

83

Ich bin nach einer anderen Lösung dafür gekommen ... hier ist der 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);
    });

— vikas devde
quelle

6

Es ist wichtig hinzuzufügen, dass animation: falsesonst das wiederholte Bewegen der Maus über den Link dazu führt, dass er nicht richtig funktioniert

— Jasop

5

Ich habe eine kleine Änderung an Ihrem Code @vikas ( gist.github.com/Nitrodist/7913848 ). Nach 50 ms wird der Zustand erneut überprüft, damit er nicht offen bleibt. Das heißt, es wird kontinuierlich alle 50 ms überprüft.

— Nitrodist

2

Wie kann dies so angepasst werden, dass es mit Live-Elementen funktioniert, die gerade zum Dokument hinzugefügt wurden?

— Williamsowen

28

Hier ist meine Meinung : http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Während Sie die Maus diagonal vom Popover-Trigger zum eigentlichen Popover-Inhalt bewegen, bewegen Sie den Mauszeiger manchmal über die folgenden Elemente. Ich wollte mit solchen Situationen umgehen - solange Sie Popover-Inhalte erreichen, bevor das Timeout ausgelöst wird, sind Sie sicher (das Popover verschwindet nicht). Es erfordert delayOption.

Dieser Hack überschreibt grundsätzlich die Popover- leaveFunktion, ruft jedoch das Original auf (wodurch der Timer gestartet wird, um das Popover auszublenden). Anschließend wird ein einmaliger Listener an mouseenterPopover-Inhaltselemente angehängt.

Wenn die Maus in das Popover wechselt, wird der Timer gelöscht. Dann hört es mouseleaveauf Popover und wenn es ausgelöst wird, ruft es die ursprüngliche Urlaubsfunktion auf, damit es den Timer ausblenden starten 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);
      });
    })
  }
};

— Wojtek Kruszewski
quelle

5

Das Auffinden des Containers kann mithilfe von verbessert werden. Auf container = self.$tip;diese Weise kann das Popover sogar gefunden werden, wenn die containerEigenschaft festgelegt ist. Hier gibt es eine Geige: jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel Ich habe dieses Problem in meiner Gabelung von @Wojtek_Kruszewskis Geige gelöst : jsfiddle.net/HugeHugh/pN26d siehe den Teil, der überprüft, if (!thisTip.is(':visible'))bevor ich denoriginalShow()

— H Dog

1

Wenn das Popover mit der Option initialisiert container: 'body',wird, funktioniert diese Lösung nicht wie erwartet. Die Variable containermuss durch ersetzt werden self.$tip. Überprüfen Sie meine Antwort für weitere Details: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

Brillant. Dies funktioniert im Gegensatz zu den anderen Antworten, wenn der Parameter 'selector' verwendet wird.

— Jetlej

1

Hier ist eine verbesserte Version, die einen Fehler behebt, wenn die Spitze verlassen und wieder betreten wird, und das Szenario behebt, wenn die Spitze am Körper befestigt ist. Jsfiddle.net/Zf3m7/1499

— Zoltán Tamási

14

Ich denke, ein einfacher Weg wäre folgender:

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

Auf diese Weise wird das Popover im Zielelement selbst erstellt. Wenn Sie also mit der Maus über das Popover fahren, befindet es sich immer noch über dem Element. Bootstrap 3.3.2 funktioniert gut damit. Ältere Versionen haben möglicherweise Probleme mit der Animation. Daher möchten Sie möglicherweise "Animation: falsch" deaktivieren.

— Cu Lý
quelle

Ich weiß, dass dieser Thread alt ist, aber dies ist meiner Meinung nach die beste und sauberste Lösung und sollte höher eingestuft werden. Die einzige Einschränkung ist, dass dies brechen würde, wenn Sie das Popover (auf seltsame Weise) "weg" vom Triggerelement positionieren. Solange der Abstand zwischen den beiden Null ist (z. B. überlappen sie sich), funktioniert dies wunderbar und erfordert kein benutzerdefiniertes JS. Danke dir!

— JohnGalt

Das ist die bisher beste, sauberste und einfachste Lösung. Sollte höher eingestuft werden! Ich habe hinzugefügt delay: { "hide": 400 }, um eine Verzögerung vor dem Verstecken hinzuzufügen, und es funktioniert großartig! 👍

— Coorasse

14

Ich habe den Triggersatz auf verwendet hoverund den Containersatz auf den gegeben #elementund schließlich eine Platzierung des boxauf hinzugefügtright .

Dies sollte Ihr Setup sein:

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

und #exampleCSS muss position:relative;die folgende jsfiddle überprüfen:

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

Bearbeitet

Diese Geige hat beide Links, die ohne Probleme funktionieren http://jsfiddle.net/davidchase03/FQE57/4/

— David Chase
quelle

hmm das funktioniert, kann ich in der contentOption jquery ajax verwenden , um den Inhalt von der Serverseite zu übernehmen. Wird das funktionieren oder ich muss etwas zusätzliche Arbeit dafür tun

— vikas devde

@vikasdevde Ja, Sie können ajaxin den Inhalten verwenden, aber Sie müssen einrichten , damit das funktioniert ... Bitte markieren Sie die Antwort richtig, wenn es Ihre gelöst hat OP.. damit andere profitieren können

— David Chase

aber wenn wir den Link selbst als Container verwenden, wird das gesamte Popover zu einem Link ... versuchen Sie es

— vikas devde

Wenn Sie einen Link in die Box einfügen, wird dieser immer noch verlinkt. Richtig?

— David Chase

2

Keine der Arbeiten der jsfiddle für mich. Chrome 20. März 2014.

— pferrel

7

So habe ich es mit Bootstrap Popover gemacht, mit Hilfe anderer Bits im Netz. Ruft dynamisch den Titel und den Inhalt der verschiedenen Produkte ab, die vor Ort angezeigt werden. Jedes Produkt oder Popover erhält eine eindeutige ID. Popover verschwindet beim Beenden des Produkts ($ this .pop) oder des Popovers. Timeout wird verwendet, bei dem das Popover bis zum Beenden durch das Produkt anstelle des Popovers angezeigt wird.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

— hoektoe
quelle

Dies funktioniert auch, wenn das Popover kein untergeordnetes Element des Zielelements ist. +1

— Taha Paksu

6

Hier ist eine von mir entwickelte Lösung, die anscheinend gut funktioniert und es Ihnen gleichzeitig ermöglicht, die normale Bootstrap-Implementierung zum Aktivieren aller Popover zu verwenden.

Ursprüngliche Geige: 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');
});

— eXpressiveDesign
quelle

2

Ich bin damit einverstanden, dass der beste Weg darin besteht, den von David Chase , Cu Ly und anderen angegebenen zu verwenden. Der einfachste Weg, dies zu tun, besteht darin, die container: $(this)Eigenschaft wie folgt zu verwenden:

$(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 hier darauf hinweisen, dass das Popover in diesem Fall alle Eigenschaften des aktuellen Elements erbt . Wenn Sie dies beispielsweise für ein .btnElement (Bootstrap) tun , können Sie keinen Text im Popover auswählen . Ich wollte das nur aufzeichnen, da ich einige Zeit damit verbracht habe, meinen Kopf darauf zu schlagen.

— Forumulator
quelle

1

Vikas Antwort funktioniert perfekt für mich, hier füge ich auch Unterstützung für die Verzögerung hinzu (Ein- / Ausblenden).

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

Bitte beachten Sie auch, dass ich mich geändert habe:

if (!$(".popover:hover").length) {

mit:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

so dass es genau auf das geöffnete Popover verweist und nicht auf ein anderes (da jetzt durch die Verzögerung mehr als 1 gleichzeitig geöffnet sein könnte)

— user1993198
quelle

Der Kommentar, den ich am Ende gemacht habe, ist eigentlich nicht richtig, wenn ich container: body benutze, wenn ja, muss ich noch Vikas 'Lösung für diese eine Zeile verwenden

— user1993198

1

Die gewählte Antwort funktioniert , schlägt jedoch fehl, wenn das Popover mit dem bodyals Container initialisiert wird .

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

Eine Lösung, die auf der gewählten Antwort basiert, ist der folgende Code, der vor der Verwendung des Popovers platziert werden muss.

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, self.$tipwenn das DOM nicht durchlaufen wird, sondern erwartet wird, dass das Popover immer ein Geschwister des Elements ist.

— Rubens Mariuzzo
quelle

0

Gleiches gilt für Tooltips:

Für mich funktioniert die folgende Lösung, weil sie nicht bei jedem 'Mouseenter' Ereignis-Listener hinzufügt und es möglich ist, den Mauszeiger über das Tooltip-Element zu bewegen, das den Tooltip am Leben erhält.

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100

— phlppn
quelle

0

Diese Lösung hat für mich gut funktioniert: (jetzt ist sie kugelsicher) ;-)

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

— Johannes Ferner
quelle

0

        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).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);
            });
        });

— Dinesh Sarak
quelle

0

Ich habe festgestellt, dass der mouseleaveWille nicht ausgelöst wird, wenn seltsame Dinge passieren, wie sich der Fensterfokus plötzlich ändert und der Benutzer dann zum Browser zurückkehrt. In solchen Fällenmouseleave wird niemals ausgelöst, bis der Cursor über das Element fährt und es wieder verlässt.

Diese Lösung basiert mouseenterauf dem windowObjekt und verschwindet, wenn die Maus an eine andere Stelle auf der Seite bewegt wird .

Dies wurde entwickelt, um mit mehreren Elementen auf der Seite zu arbeiten, die es auslösen (wie in einer Tabelle).

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});

— Gabriel Luci
quelle

0

Es wird flexibler sein 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);
    } 
)

— Grauer Li
quelle

0

Einfach :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});

— edmc73
quelle

0

Ich musste dies kürzlich mit KO zum Laufen bringen, und die oben genannten Lösungen funktionierten nicht gut, wenn eine Verzögerung beim Ein- und Ausblenden auftrat. Das Folgende sollte dies beheben. Basierend darauf, wie Bootstrap-Tooltips funktionieren. Hoffe das hilft jemandem.

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});

— Zarthost Boman
quelle

-1

Dies ist mein Code für Show Dynamics Tooltips mit Verzögerung und geladen von Ajax.

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

Erweitern Sie das Snippet

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

Erweitern Sie das Snippet

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}

Erweitern Sie das Snippet

— Giuliano
quelle