問題タブ [twitter-bootstrap-tooltip]

ボディの下の特定の div にブートストラップ 3 のツールチップを適用するときに、エッジ ケースがあります。

ツールチップをa、i、input、button、divに適用すると、ホバーするとうまく機能します。入力/ボタンにカーソルを合わせてクリックすると、mouseoutこのエッジケースのタイミングが完全に合うと、ツールチップがDOMに貼り付けられます。共有するサイトはありませんが、私の質問は、ツールチップですべての dom 要素の履歴を追跡するオプションがない場合、BS3-Tooltips ON BODY をどのようにクリーンアップしますか?

私は単にすることができませんでした...tooltip(...).on('click', function(this) { ...('hide'); } ..。コンテキストは常に本文だからです。そして、ルーティング時にすべてのツールチップを簡単にクリアするために、その .spa 内にツールチップを配置する必要があります。

PSアニメーション、遅延を削除しようとしました。

Web アプリケーション用の「カスタム」検証モジュールを構築しています。すべてのチェックボックス要素に変更リスナーをアタッチしています。change イベントが発生すると、入力が必要かどうかを確認します。要素がチェックされていない場合、要素は検証に失敗します。特定のチェックボックスを手動でクリックすると、これは完全に機能します。ツールチップは計画どおりに表示/破棄されます。

送信ボタンをクリックしたときに同じ機能を取得しようとしています。システムは、ツールチップがレンダリングされる (はずである) ことを認識していますが、そうではありません。クリックイベントをトリガーする必要があるようですが、チェックボックス要素でそれを行うと、要素が選択されます。ユーザーが望む機能ではありません。実際に何もクリックせずに、クリックを渡す方法がわかりません。

特定の要素が無効な場合にツールリップを呼び出す方法は次のとおりです。

Validation.js

特定のツールチップを初期化して表示するコードは次のとおりです。

Tooltip.js

私はプロジェクトに取り組んできましたが、解決したいブートストラップの動作に矛盾があることに気付きました。

ポップオーバー (またはツールチップなど、基本的には同じもの) が画面の端に近づくと (右側のポップオーバーの場合、端に近づくと)、画面外に出ないように収縮します (機能するだけです)。ある程度までですが、通常はそれで十分です）。

これは、配置が左にある場合には発生しません。

すなわち:

正しい配置:

通常の幅:

端に近い：

左の配置:

通常の幅:

端に近い：

これらの画像は、問題を説明するために私が書いた小さなDEMOからのものです。

ソースコードをいじりましたが、これまでのところ役に立ちませんでした。そもそもこの動作の正確な原因に指を置くことができないようです。

何か案は？

ps

Bootstrap 3.1.1 を使用しています。新しい 3.2 ではこの問題は解決されません(この時点でのアップグレードは避けたいと思います)。

メジャーアップデート！

掘り下げた後、これはブートストラップとは関係がないことがわかりました-それは単純なcssです-要素を絶対に配置して横に押すと、画面にとどまろうとするようです。

私はこの動作について知りませんでした。自動的に発生しますが、押している方向にのみ発生します。つまり、左から押した div は画面の右端に到達すると縮小し、その逆も同様です。

たまたま、ポップオーバーがleft割り当てでのみ配置されているため、一貫性のない動作が見られます。右に押すと収縮しますが、他の方向には収縮しません。

解決策は代入することrightです - 簡単に聞こえますか? それほどでもない。ソース コードを取得して少し操作し、次の行を追加しました (jsfiddle の 250 行目辺りのどこかに):

合理的ですね。左へのオフセットが 0 未満の場合 (つまり、画面外になる場合)、ウィンドウの幅を計算し、そこから左のオフセットとポップオーバー ( actualWidth) 自体の幅を削除すると、右からの距離が得られます。

次に、オフセットを左にリセットし、右の配置を適用してください。しかし...それはある程度しか機能しません-つまり、2回目にしか機能しません。

あなた自身でそれをチェックしてください！一度ホバーすると位置がずれてしまい、マウスを横に引いてもう一度試すと、突然正しく配置されます。なんてこったい？

編集

わかりました、これはよく出てくるようですので、明確にします：

auto配置については知っています。私はそれをしたくありません。ポップオーバーの移動先を制御したいのですが、自動的に決定させることは問題の解決策ではなく、単に回避しているだけです

ツールチップの表示には、bootstrap-tooltip と angularJs を使用しています。

ツールチップの表示に次のコードを使用しています。

初めて正常に動作する下の図のように:

値を 4 から 5 に変更するとどうなるか見てみましょう:

なぜ ？ツールチップが 2 つ表示されます。ブラウザのツールチップは正しいですが、ブートストラップのツールチップは正しくありません。

数秒後に Boostrap ツールチップを自動的に非表示にしたい。