Inspecter l'élément de revêtement en Chrome?

vous auriez juste besoin de forcer l'infobulle pour montrer comme tel

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

maintenant l'infobulle va apparaître indépendamment de l'état de vol stationnaire.

Faites défiler vers le bas près du fond du DOM où vous devriez voir le markup.

mise à Jour voir cneuro commentaire pour Bootstrap 3.

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

Update voir la réponse de Marko Grešak pour Chrome et apparemment Safari aussi, "151930920" peut être utilisé comme raccourci pour l'élément actuellement sélectionné. Cela semble fonctionner dans Safari.

$("151920920").tooltip('show')

cette solution fonctionne sans code supplémentaire.

Hit command-option-j pour ouvrir la console. Cliquez sur la fenêtre-bouton dans le coin supérieur droit de la console pour ouvrir la console dans une fenêtre différente.

ensuite, dans la fenêtre Chrome, passez au-dessus de l'élément qui déclenche le popover, cliquez sur command-` cependant, vous devez vous concentrer sur la console, puis tapez debugger . Ça va geler la page, puis vous peut inspecter l'élément dans l'onglet Éléments.

F8 mettra en pause le débogage.

souris sur le tooltip, et appuyez sur F8 pendant qu'il est affiché.

vous pouvez maintenant utiliser l'inspecteur pour regarder la CSS.

pour moi, la réponse acceptée n'a pas fonctionné: cliquer dans DevTools a immédiatement fermé l'infobulle.

cependant, j'ai trouvé https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution qui m'a aidé:

1. dans la console:, Run: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });

2. mettre en Surbrillance l'élément de l'inspecteur

3. Tapez F12

vous pouvez maintenant inspecter l'élément, avec JavaScript en pause afin que le DOM ne change pas.

Voici une solution simple: si vous avez des outils dynamiques, vous pouvez les rendre "persistants" en changeant (Temporairement) l'événement déclencheur en click . Cela aura pour effet que l'info-bulle ne disparaît sur un clic:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

de cette façon, il peut être facilement inspecté avec les outils de débogage FF ou Chrome.

j'ai eu des problèmes avec cela donc je suis allé à la documentation et j'ai inspecté l'infobulle qui est déjà rendu sur la page. Cela m'a aidé à voir la structure dom de l'infobulle et à l'éditer en conséquence.

dans Chome sur Linux cela peut être réalisé pour les infobulles générés par JS comme ceux pour les références sur WikiPedia en faisant ce qui suit:

comme indiqué ci-dessus, ouvrez les outils dev en utilisant F12. Les ouvrir dans une autre fenêtre. Mettez en surbrillance l'infobulletin et cliquez sur Ctrl-Shift-C (L'Inspecteur HTML). Lorsque vous vous déplacez au-dessus de la pointe, la fenêtre dev affichera la section appropriée.

si vous avez besoin de garder le bout ouvert lorsque vous la souris, pour être en mesure de l'inspecter dans l'autre fenêtre, cliquez avec le bouton droit de la souris sur le menu contextuel et cliquez sur la fenêtre dev tools. Dans ce scénario, il laisse la pointe dans la fenêtre Wikipédia.

dans une certaine mesure, il fonctionne aussi avec des bouts de bootstrap.

Pour une raison quelconque, les réponses fournies ici ne fonctionnaient pas pour moi sur Windows. J'ai pu inspecter le tooltip en ouvrant les outils dev, puis en survolant l'élément qui soulève le tooltip, puis en cliquant droit sur cet élément (pas le tooltip). Ensuite, déplacez le curseur sur l'inspecteur du panneau et faites défiler vers le bas. L'élément tooltip devrait toujours être présent.

Pas de solution de code pour le JS activé les info-bulles:

avec les devtools de Chrome inspecter l'élément contenant / parent du tooltip. Dans l'onglet" elements", cliquez avec le bouton droit de la souris sur l'élément container DOM puis choisissez" break on " > "subtree modifications". La prochaine fois que vous survolerez la partie du DOM où se trouve la tooltip, le code JS sera mis en pause pour vous permettre d'inspecter le contenu de la tooltip.

vaut la peine de noter que le basculement de l'état :hover depuis les outils dev n'a d'impact que si le texte d'indication est activé via les règles CSS :hover en premier lieu. La bascule n'applique l'état hover à l'élément qu'à des fins de rendu, mais ne déclenche pas un événement de mouseover JavaScript correspondant.

beaucoup de cadres tels que AngularJS attacher dynamiquement tooltip HTML au fond du corps du document via JavaScript quand un élément cible est plané, donc toute inspection de l'élément cible ne vous aidera pas.

la réponse de @joeyyang a très bien fonctionné pour moi dans ce scénario.