Bootstrap-Tooltip verursacht Bildschirmsprung auf iPad

Question

So verwende ich die knockout-bootstrap.js-Lib, um mit Bootstrap-Tooltip-Initialisierung zu unterstützen, wenn Sie Knockout.js verwenden, um Tooltips auf einige KO-gebundene HTML-Elemente anzuwenden.

<a href="#" data-bind="attr: { tabindex: -1 }, tooltip: { title: buyerHelp, placement: 'top', trigger: 'click', container: 'body' }"><i class="glyphicon glyphicon-help"></i></a> 

I Trigger bin mit: ‚Klick‘ statt schweben da schweben Tooltips sich nicht wieder verstecken einmal Anzeige ein iPad verwenden. Wenn ich auf ein Tooltip-Symbol tippe, wird der QuickInfo angezeigt, aber wenn die Seite gescrollt wird, springt sie zurück zum Anfang. Ich bin mir nicht sicher, in welche Richtung ich mit diesem Thema gehen soll.

Ich verwende derzeit Bootstrap 3.0, hatte aber das gleiche Problem mit Boostrap 2.3 Danke!

Answer 1

Wird der Link tatsächlich angeklickt, wenn Sie auf klicken? Wie in ist die Seite, die versucht, den href-Wert des Ankers nach dem Klicken zu laden? Da das ganze Tag in Ihrem Beispiel nicht enthalten ist, bin ich mir nicht sicher, ob es ein Anker ist. Und ich bin mir nicht sicher, ob die knockout-bootstrap.js-Bibliothek verhindert, dass datengebundene Ereignisse zurückkommen (wie sie es tun würden) auf dem Standardklickereignis). Wenn der Anker versucht, dem Link beim Klicken zu folgen, können Sie versuchen, das Klickereignis zu beobachten und das Ereignis bei der Datenbindung zu verhindern. Wie nach dem Tooltip:

data-bind="attr: { tabindex: -1 }, tooltip: { title: sellerHelp, placement: 'top', trigger: 'click' }, click: function(data, event) { event.preventDefault(); }" 

Hoffentlich hilft das!

Auch im Allgemeinen wäre es am besten, den Handler im ViewModel zu haben und es von dort statt inline zu verhindern.

Würde wahrscheinlich gut sein auf dem Weg Click-Ereignisse als auch in Knockout gehandhabt werden zu lesen: http://knockoutjs.com/documentation/click-binding.html

Answer 2

Mai container: 'body' den Optionen das Hinzufügen Hash helfen könnte, wie folgt aus:

data-bind="attr: { tabindex: -1 }, tooltip: { title: sellerHelp, placement: 'top', trigger: 'click', container: 'body' }" 

Answer 3

finde ich, dass um mit dem CSS spielen wird in der Regel das Problem zu beheben.

Ich schlage vor zu versuchen, eine Position hinzuzufügen/zu entfernen: relativ zu den Eltern.

Auch hier sind die folgenden CSS-Eigenschaften, die für mich Probleme in der Vergangenheit verursacht haben: - Position - Marge - Höhe

Ohne eine Geige zu sehen, es ist schwer, genau zu sagen, was es ist. Es ist nicht die Bibliothek, da sie auf der Demo ein funktionierendes Beispiel haben.