問題タブ [twitter-bootstrap-tooltip]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - React Bootstrap Tooltip を DOM に表示する前に配置およびサイズ変更する方法は?
ウィンドウの端に近づかない限り、うまく機能する反応ブートストラップ ツールチップがあります。その場合、ツールチップを切り取るのではなく、テキスト全体に合わせてサイズを変更し、すべての側面に境界線を付けたいと考えています。
また、ツールチップの矢印がトリガー要素 (私の場合は「i」アイコン) のすぐ上を指すようにします。
私の推測では、ReactBootstrap.Tooltipレンダリングが完了したら、DOM を操作する必要があると思います。現在のサイズとウィンドウの上部と左のオフセット位置を計算して、再配置/サイズ変更できるようにする必要があります。
これが私の現在のコードです（CoffeeScriptで）：
そして、ここに問題のスクリーンショットがあります:
この問題を解決するにはどうすればよいですか?
twitter-bootstrap - ブートストラップ ツールチップ css は公式の例と同じではありません
を使用してbootstrap tooltipいますが、スタイルは公式の例と同じではありません。
私はインポートbootstrap.js, bootstrap.cssし、のようなものを使用して います
しかし、ツールチップのスタイルは次のように表示されます:
私が欲しいのは：
それで、誰かが私が逃したものを教えてもらえますか? ありがとう
http://plnkr.co/edit/K21dTDcDqAUmasi3yrDd?p=preview
css - 部分的に隠れた画像の隣にブートストラップ ツールチップを正しく配置する方法
正しく配置できないブートストラップ ツールチップを使用した次のページがあります。このページには次の特徴があります。
#outer-containerは私のページです。固定幅です。- 多くあります
.inner-container。固定幅とoverflow-x: auto. .inner-containers動的に生成されます。(関連性があるかどうかわからないので、次のサンプル コードは静的です)- div内には、多くのタグ
.inner-containerを含めることができる任意の HTML があります。<img> - それぞれに、タイトルとしてテキストを
<img>含むツールチップがあります。alt - 画像は
.inner-containerdivよりも広くすることができます
これがスニペットです。スニペットをフルページで実行すると問題が発生します。
上記のコードは、ツールチップを表示するのに問題なく動作しますが、少し問題があります。ツールチップは、切り捨てられた画像の直後に表示されるのではなく、画像の非表示部分が終了する場所の後に表示されるため、画像から離れすぎて表示されます。
右にスクロール.inner-containerすると、ツールチップが img に近づき、隣に表示されます。
画像が画面全体よりも広い場合、状況はさらに悪化します。これは、ツールチップが右に離れすぎて、予想されるスクロールバーだけでなく、.inner-containerページ全体にも 1 つ生成されるためです。ツールチップをスクロールしようとするとすぐにフェードアウトするため、ツールチップを表示できなくなりました。
今問題は.....
ブートストラップのツールチップを構成したり、css でスタイルを設定して、「実際の」が隠れたエッジではなく、2 番目の画像のようにトリミングされた画像の端に常に表示されるようにする方法はありますか? また、画像がツールチップよりも短い場合.inner-container、コンテナーの右端ではなく、画像の横に表示する必要があります。
javascript - 複数のポップオーバーの表示と配置をブートストラップする
フィールドにフォーカスがあるときにポップオーバーを表示する複数のフォーム入力フィールドとテキスト フィールドがあります。一部のポップオーバーのコンテンツは長くなる可能性があるため、input タグ内でコンテンツを宣言したくありません。代わりに、次のものがあります。
私は次のJavaScriptを持っています
上記のJavaScriptで正しいポップオーバーを表示または返すにはどうすればよいですか。ツールチップのコンテンツにデータ属性を追加して、各入力フィールドにリンクする<div class="js-tooltip" style="display:none;" data-tooltip="name">など、jquery を使用してそれを見つけて返すとどうなるでしょうか。jqueryでこれをどのように行いますか？誰もがよりエレガントなソリューションを持っていますか?
また、ウィンドウのサイズ変更時にポップオーバーを入力フィールドと自動位置に残すにはどうすればよいですか。現在、ウィンドウのサイズを変更すると浮き上がります。
上記のhtmlを使用して、自分でそれを理解することができます:
よりエレガントなソリューションを考えられる人はいますか?