Bootstrap Popovers werden nicht ausgblendet

[Chronos]

Hallo Forum,

ich weiß langsam wirklich nicht weiter, ich nutze aus Bootstrap das Popover-Plugin
um Tooltips mit Inhalt (so genannte Popovers) zu erstellen.

Das Problem habe ich mit dem Ausblenden der Popovers:

Wechsele ich von Button zu Button (die runden Elemente), dann wird das jeweilige Popover ein- und das
vorherige ausgeblendet.

Verlasse ich aber das Popover nach oben hin und wechsele dann auf den nächsten Button, wie hier z. B. auf
den Share-Button (der mit dem Facebook und Twitter-Logo), wird das andere nicht ausgeblendet. Übrigens auch nicht, wenn ich irgendwo in die graue Fläche klicke.

Jeder der Buttons besitzt

data-toggle="popover"
data-trigger="hover"

Da das Problem so ähnlich scheinbar mehrere besitzen: http://stackoverflow.com/questions/...-until-my-mouse-moves-into-it/9760366#9760366

bin ich so vorgegangen:

$('[data-toggle=popover]').popover({
        container   : $(this).parentNode,
        html        : true,
        content     : function() {
            return $(this).siblings('.popover-content-storage').html();
        },
        selector    : true,
        trigger     : "manual"
    }).on({
        "mouseenter": function(e) {
            $(this).popover('show');
        },

        "mouseleave": function(e) {
            var _this = this;

            setTimeout(function() {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 100);
        }
    })

Was aber wie schon gesagt leider nichts bringt, davon abgesehen sollten sich die Popovers aber auch schließen wenn man irgendwo außerhalb klick (weil es ja kein Hover oder Mouseleave unter mobile gibt).


Hoffe jemand hat ne Idee, ich weiß es ist schwierig nachzuvollziehen aber naja, danke schon mal!

 

[Chronos]

Okay... also ich hab noch etwas gebastelt und es verhält sich nun so wie ich es möchte, ob das jetzt die optimale Lösung ist kann ich nicht sagen, aber es geht.

$(document).ready(function() {
    var isVisible = false;

    // Hides all Popovers
    var hideAllPopovers = function() {
        $('.popover').each(function() {
            $(this).css('display', 'none');
        });
    };

    /**
     * Init popovers.
     *
     * "selector:true" prevents removal of title attribute content.
     * title attribute is needed for icon buttons/links.
     */
    $('[data-toggle=popover]').popover({
        container   : $(this).parentNode,
        html        : true,
        content     : function() {
            return $(this).siblings('.popover-content-storage').html();
        },
        selector    : true,
        trigger     : "manual"
    }).on({
        "click": function(e) {
            if(isVisible) {
                hideAllPopovers();
            }

            $(this).popover('show');

            // handle clicking on the popover itself
            $('.popover').off('click').on('click', function(e) {
                e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
            });

            isVisible = true;
            e.stopPropagation();
        },

        "mouseenter": function(e) {
            $(this).popover('show');
        },

        "mouseleave": function(e) {
            var _this = this;

            setTimeout(function() {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 100);
        }
    })

    /**
     * Eventlistener for live created Popovers
     * to hide them when User is leaving them
     */
    $(document).on('mouseleave', '.popover', function() {
        hideAllPopovers();
        isVisible = false;
    });

    // To hide all Popovers when User clicks somewhere on the page
    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });

Sorry an die, die Zeit verschwendet haben das zu lösen (aber vllt. habt ihr ja trotzdem eine bessere Lösung? Dann her damit !)

 

[Tronjer]

Ich kenne das Popover-Plugin nicht, aber wenn ich mir jetzt nur den Code anschaue:

Statt $(this).parentNode würde ich ein $(this).closest('irgendEineKlasse') nehmen. Benamte Selektoren anzusprechen ist stabiler, falls sich im DOM mal etwas ändern sollte.

Wozu das setTimeout? Und Frage nach der Nicht-Existenz eines Elements stellt man eigentlich so: $("myElement").length < 1.

Das $(document).on('click') lässt sich auch genauer spezifieren:

$(document).on('click', function(e) {
if (e.target.nodeName != NavigationsElement) {....}
});

Aber wenn dein Script funktioniert, ist es ja gut.

 

[Chronos]

Danke, das probiere ich morgen mal und editierte dann ggf. den Beitrag hier :]