Tooltip Bootstrap che causa lo schermo per saltare su iPad

Question

Così sto usando il knockout-bootstrap.js lib per aiutare con l'inizializzazione tooltip bootstrap quando si utilizza Knockout.js per applicare le descrizioni comandi ad alcuni elementi HTML binded KO.

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

Sto usando grilletto: 'Click', invece di hover perché tooltip al passaggio del mouse non si nascondono ancora una volta display usando un iPad. Quando tocchi l'icona di un suggerimento, la descrizione del comando appare corretta, ma se si scorre la pagina, torna all'inizio. Non sono sicuro di quale direzione prendere con questo problema.

Attualmente sto utilizzando Bootstrap 3.0 ma ho riscontrato lo stesso problema con Boostrap 2.3 Grazie!

Answer 1

Il collegamento viene effettivamente seguito quando si fa clic? In quanto la pagina sta tentando di caricare il valore href dell'ancora dopo aver fatto clic? Poiché l'intero tag non è incluso nel tuo esempio, non sono sicuro che sia un ancoraggio .. E non sono sicuro che la libreria knockout-bootstrap.js garantisca che gli eventi legati ai dati non possano ritornare (come farebbero sull'evento click predefinito). Se l'ancora tenta di seguire il link al clic, puoi provare a guardare l'evento click e impedire l'evento in data-bind. Ad esempio dopo il suggerimento:

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

Speriamo che questo aiuti!

Inoltre, in generale, sarebbe meglio avere il gestore in viewModel e prevenirlo da lì, piuttosto che in linea.

probabilmente sarebbe bene leggere sul modo in cui gli eventi click vengono gestiti in knockout così: http://knockoutjs.com/documentation/click-binding.html

Answer 2

Può essere l'aggiunta di container: 'body' alle opzioni di hash potrebbe aiutare, come quella:

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

Answer 3

trovo che giocare con il CSS di solito risolvere questo problema.

Suggerisco di provare ad aggiungere/rimuovere una posizione: relativa al genitore.

Inoltre, qui sono le seguenti proprietà CSS che hanno causato problemi per me in passato: - posizione - Margine - altezza

Senza un violino di vedere le cose è difficile dire esattamente quello che è. Non è la biblioteca poiché in demo hanno un esempio funzionante.