web-dev-qa-db-ja.com

Twitter Bootstrapツールチップ：ボタンの上に配置するとちらつきますが、左/右/下に配置すると正常に機能します

ブートストラップのツールチップのインスタンスの奇妙な動作を扱っています。

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

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

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

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

更新：

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

jquerytwitter-bootstraptooltip
21
AndraD

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

8
AndraD

ツールチップに追加pointer-events: none;cssルールのように

.tooltip {
  pointer-events: none;
}

これにより、ツールチップがマウスイベントのターゲットになるのを防ぎ、問題を解決します。

44
DicBrus

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

5
Eric

応答が遅れましたが、これと同じ問題が発生し、html要素のツールチップjqueryリファレンスの「container」オプションを使用して解決できました。

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

ツールチップコンテナオプションの詳細を確認できます ここ 。

3
tnschmidt

スティーブの答えに基づいて、問題は、フォントの素晴らしいcssへの私のcss参照がafter bootstrap css。bootstrap cssは、fontawesomeアイコンの表示プロパティを「インラインブロック」に設定します。

そのため、この問題を修正するために、bootstrap css参照をfontawesome cssの後に移動しました。これにより、ちらつきの問題が修正されました。

2
ptutt

これは、aタグなどのインライン要素で発生します。 displayプロパティをblockに設定すると、問題が解決します。

1
Steve Parish

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

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

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

0
James Donnelly