Chrome Mobile Bootstrap Popover Problem

[Chronos]

Hallo,

ich hatte unter folgendem Link schon ein mal ein Problem mit dem Popover-Plugin aus Bootstrap, was nun auch mittlerweile geht: http://www.html.de/threads/bootstrap-popovers-werden-nicht-ausgblendet.51782/

Jetzt ist mir aber aufgefallen, dass ich im Chrome unter Android die Popovers nicht direkt beim ersten klicken (touch) öffnen kann, erst beim zweiten mal am iPad funktioniert es genau wie es soll. Am iPad öffnet sich immer nur ein Popover und beim Click auf ein anderes, wird das vorherige geschlossen - genau wie es soll.

Ehrlich gesagt weiß ich auch gar nicht was ich da falsch mache: Ich zeige euch mal einen Code vielleicht weiß jemand was damit anzufangen:

In Zeile 23 habe ich "manual" und "click" als Event aufgeführt, da sonst am iPad die Popovers erst beim zweiten mal aufgehen (auch seltsam).

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

    var toggleShare = $('[data-toggle=popover]');

    /**
     * Init popovers.
     *
     * "selector:true" prevents removal of title attribute content.
     */
    toggleShare.popover({
        container   : $(this).parentNode,
        html        : true,
        content     : function() {
            return $(this).siblings('.popover-content-storage').html();
        },
        selector    : true,
        trigger     : "manual click"
    });

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

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

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

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

Im Markup selbst gibt es nicht viel zu sehen:

<button class="btn btn-contact" data-placement="top" data-trigger="hover" data-toggle="popover" title="Kontakt" type="button"

Ich hab echt kein Plan was man da noch tun kann, vielen Danke schon mal für jede hilfe

 

[Chronos]

Es geht (oh mann... manchmal wünschte ich, ich würde dann doch nicht von selbst darauf kommen).
Daher der Vollständigkeit halber. Scheinbar muss man sich ein eigenes "hover" schreiben damit beim verlassen des Buttons das Popover nicht direkt wieder ausgeblendet wird - und das aber nur am Desktop.

Was ich jetzt getan habe, war zu prüfen ob das Gerät touch unterstützt und wenn nicht, mit eigenem hover durch "mouseenter" und "mouseleave" die Popovers ein- bzw. auszublenden.
Was sich auch als sehr großes Problem darstellte: am Nexus 4, und scheinbar nur mit meinen Fingern (die von jemand anderem gingen eigentlich immer) , konnte ich meistens nur wie eingangs erwähnt, beim zweiten mal das Popover öffnen. Hingegen mit meinem Nexus 5 ging es immer direkt.. und so habe ich erst mal gemerkt, dass der Trigger "click" reicht.
Im Markup selbst habe ich alle Events entfernt:

<button
  type="button"
  class="btn btn-share"
  title="{% trans %}social_media{% endtrans %}"
  data-toggle="popover"
  data-placement="top"
  data-alt-placement="left"
 >

Wichtig ist aber dennoch das man sein eigenes Fake hover nur triggert wenn man am Desktop ist, sonst beißt sich das trotzdem im Chrome mobile.
Schätze man kann das noch eleganter schreiben oder ganz anders lösen aber naja es geht ^^.

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

    /**
     * Checks if the device has a touch screen
     *
     * @returns {boolean|*|boolean}
     */
    function isTouchDevice() {
        var touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
        return touch;
    }

    // Toggle-Buttons for contact, share and language
    var toggleButtons = $('[data-toggle=popover]');

    // Initialize popovers for contact, share and language
    toggleButtons.popover({
        container   : $(this).parentNode,
        html        : true,
        content     : function() {
            return $(this).siblings('.popover-content-storage').html();
        },
        selector    : true,
        trigger     : "click"
    });

    // It isn't a touchscreen device
    if (!isTouchDevice()) {
        // Add EventListeners for non-touch devices
        toggleButtons.popover({

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

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

                setTimeout(function() {
                    if ($('.popover:hover').length < 1) {
                        $(_this).popover('hide');
                    }
                },  100);
            }
        })

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

Dennoch wie immer, wenn es Verbesserungsvorschläge gibt, immer her damit.

 

[scbawik]

Interessant. Ist mir auch schon aufgefallen dass mein N4 gelegentlich erst beim zweiten Click reagiert.