BootstrapのツールチップによりiPad上で画面がジャンプする

Question

knockout.jsを使用していくつかのKOバインドされたHTML要素に適用するとき、ブートストラップツールチップの初期化を支援するknockout-bootstrap.jsライブラリを使用しています。

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

私はトリガーを使用しています：ホバーの代わりに「クリック」するのは、ホバーのツールチップがiPadを使用して一度表示されないためです。ツールチップのアイコンをタップするとツールチップはうまく表示されますが、ページがスクロールされていれば上にジャンプします。私はこの問題にどのような方向性があるかは分かりません。

私は現在Bootstrap 3.0を使用していますが、Boostrap 2.3と同じ問題がありました。 ありがとうございました！

Answer 1

クリックすると実際にリンクが続いていますか？をクリックした後のアンカーのhref値を読み込もうとしているページがありますか？タグ全体があなたの例に含まれていないので、アンカーかどうかわかりません。knockout-bootstrap.jsライブラリがデータバインドされたイベントが返されることを確実にしているかどうかはわかりません（デフォルトのクリックイベント）。アンカーがクリック時にリンクをたどろうとしている場合は、クリックイベントを監視してデータバインドでイベントを防ぎます。ツールチップの後など：

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

うまくいけば助けてください！

また、一般的には、ハンドラをviewModelに置いて、インラインではなく、それを防ぐことが最善の方法です。

はおそらく、クリックイベントは、同様に、ノックアウトで処理する方法にまで読み取ることが良いでしょう：私は、おかげで、すぐにこれを試しちゃiPad上で私の手を取得しますhttp://knockoutjs.com/documentation/click-binding.html

Answer 2

はオプションのハッシュへcontainer: 'body'を追加することができることと同様に、助けることができる：

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

Answer 3

私はCSSで遊んでは、通常はこの問題を解決することを見つけます。

親を基準に位置を追加/削除しようとします。位置 - - マージン - 高さ

それはそれは正確に何を言うのは難しい見てフィドルなし ：

また、ここでは、過去に私のための問題を引き起こしている、以下のCSSプロパティがあります。デモでは実例があるので、図書館ではありません。