134

Chrome の開発者ツールを使用して、ツールチップがサイトでどのように構成されているかを確認しようとしています。ただし、アイテムにカーソルを合わせても、「要素を検査」すると、html のツールチップに何も表示されません。Style を に設定できることはわかって:hoverいますが、ツールチップの html または css が表示されません。

何か案は？

4

24 に答える 24

160

F8デバッグを一時停止します。

Mac では、開発者ツールの [ソース] タブを開く必要がある場合があります。

ツールチップの上にマウスを移動し、F8表示中に を押します。

インスペクタを使用して CSS を確認できるようになりました。

于 2016-07-29T03:38:31.567 に答える
101

実際に、Twitter Bootstrap のツールチップでそれを行うためのトリックを見つけました。別のモニターで開発ツール (F12) を開き、要素にカーソルを合わせてツールチップを表示する場合は、[要素の検査] を選択するかのように右クリックします。そのコンテキスト メニューを開いたままにして、フォーカスを開発ツールに移動します。ツールチップの html は、HTML 内のツールチップの要素の横に表示されます。そうすれば、それを別の要素であるかのように見ることができます。Chrome に戻ると HTML が消えてしまうので注意が必要です。

ちょっと変わった方法ですが、私にはうまくいったので、共有したいと思いました。

于 2013-03-12T20:05:51.483 に答える
67

ツールチップをそのように表示するように強制する必要があるだけです

$('.myelement').tooltip('open');

ホバリング状態に関係なく、ツールチップが表示されるようになりました。

マークアップが表示される DOM の下部近くまでスクロールします。

更新は、Bootstrap 3 に関する cneuro のコメントを参照してください。

$('.myelement').tooltip('show');

更新は、Marko Grešak の Chrome および明らかに Safari に対する回答を参照してください$0。現在選択されている要素のショートカットとして使用できます。これはSafariでも機能するようです。

$($0).tooltip('show')
于 2013-10-30T14:53:27.663 に答える
29

私にとって、受け入れられた答えはうまくいきませんでした.DevToolsをクリックすると、すぐにToolTipが閉じました。

ただし、https ://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution が役立ちました。

  1. コンソールで:、実行:
    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

  1. インスペクターで要素を強調表示する

  2. F12を押す

DOM が変更されないように JavaScript を一時停止して、要素を検査できるようになりました。

于 2013-07-16T12:47:41.450 に答える
0

これに問題があったため、ドキュメントにアクセスして、ページに既にレンダリングされているツールチップを調べました。これにより、ツールチップの dom 構造を確認し、それに応じて編集することができました。

于 2015-10-01T01:23:53.710 に答える
0

何らかの理由で、ここで提供される回答が Windows で機能しませんでした。開発ツールを開き、ツールチップを表示する要素にカーソルを合わせ、その要素 (ツールチップではない) を右クリックすることで、ツールチップを調べることができました。次に、カーソルをインスペクタ パネルに移動し、一番下までスクロールします。ツールチップ要素はまだそこにあるはずです。

于 2017-08-03T18:35:10.477 に答える
-1

開発ツール内から :hover 状態を切り替えることは、最初に CSS :hover ルールを介してヒント テキストが有効になっている場合にのみ影響があることに注意してください。トグルは、レンダリング目的で要素にホバー状態を適用するだけで、対応する JavaScript マウスオーバー イベントをトリガーしません。

AngularJS などの多くのフレームワークは、ターゲット要素がホバーされると、ツールチップ HTML を JavaScript を介してドキュメント本文の下部に動的に添付します。

@joeyyangの答えは、このシナリオで私にとって非常にうまくいきました。

于 2017-01-20T15:32:17.673 に答える
-3

私が見つけた最も簡単な方法の1つは次のとおりです。

  1. 横にある Chrome 開発ツールを開く

  2. 要素にカーソルを合わせる

  3. 右クリック

  4. 開発ツールをクリック

  5. スタイルを調べて変更できるようになりました

于 2019-10-25T07:43:36.743 に答える