36

ブートストラップのツールチップのインスタンスの奇妙な動作に対処しています。

私が作業しているページにはいくつかのボタンがあり、ホバーすると、ボタンの機能の説明を含むツールチップが表示されます。ツールチップはすべてボタンの上に表示され、1 つのボタンを除いてすべて正常に動作します。この 1 つのボタンは、継続的にちらつきのあるツールチップを表示し、ツールチップ自体が (ボタンの上に完全に表示されるのではなく) ボタンの一部を覆い、ボタンが適切にクリックされないようにします。ツールチップの「データ配置」を「上」から「左」/「右」/「下」に変更すると、ツールチップが正しく表示されます。

さらに、問題を引き起こすボタンは、「float: right;」を持つ div でラップされています。css で割り当てられます。フロートを削除すると、ツールチップが正常に機能することに気付いたので、これについて言及しています。残念ながら、フロートを削除すると、ボタン自体の正しい位置が失われます。

ツールチップの「上部」の配置をあきらめることはできましたが、この問題に対する簡単なトリックがあることを期待していました。誰か提案はありますか？

ありがとうございました。

アップデート：

この StackOverflow の質問は、私が遭遇したものと同じ問題を示しています。答えは役に立ちました。

4

8 に答える 8

9

問題の迅速な解決策を見つけました。比較的短いですが、最初のツールチップの説明は 2 行に分かれていました。たまたま、ツールチップのテキストを 1 行に収まるように短くしてみました。これが完了すると、ツールチップが正しく表示されました。したがって、ツールチップ テキストの長さと、ボタンがページの右側 (およびページの上部) にずっと表示されているという事実に問題があるに違いないと思います。当分の間、これ以上調査することはありません。

于 2013-01-14T22:08:14.600 に答える
5

私はこの同じ問題を抱えていました。Bootstrap のツールチップは、"floated" または "inline/inline-block" 要素が相対位置または絶対位置のコンテナー内にある場合、これらの要素の上に正しく配置されないことがわかりました。絶対に配置された親コンテナー内にボタンを右に浮かせました。親の絶対配置を削除すると、ツールチップは問題なく表示されます。ブートストラップはこれに対処する必要があります。

于 2015-01-21T23:18:28.953 に答える
3

返信が遅くなりましたが、これと同じ問題があり、html 要素のツールチップ jquery リファレンスで「コンテナー」オプションを使用して解決できました。

このページとその中の jsfiddle リンクを参照してください。

ツールチップ コンテナー オプションの詳細については、こちらを参照してください。

于 2015-06-09T15:47:06.973 に答える
0

Bootstrap ビットをどの程度制御できるかはわかりませんが、ホバー イベントが常に発生しているようです。これを停止する方法は、呼び出しの前に .stop() を使用することですが、ここでそれが可能かどうかはわかりません。次に例を示します。

$('#myelement').stop().fadeOut(200);

Bootstrap 呼び出しでそのようなことができるかどうかはわかりませんが、試してみる価値があるかもしれません!

于 2013-01-14T21:32:04.330 に答える