J'essaie de voir, par le biais des outils de développement de Chrome, comment les infobulles sont structurées sur un site. Cependant, même lorsque je passe la souris sur l'élément, lorsque j'inspecte l'élément, rien n'apparaît pour l'info-bulle dans le code html. Je sais que je peux définir le style sur :hover mais je ne peux toujours pas voir le html ou le css de l'infobulle.
Des idées ?
J'ai en fait trouvé une astuce pour faire cela avec les infobulles de Twitter Bootstrap. Si vous ouvrez les outils de développement (F12) sur un autre écran, passez le curseur sur l'élément pour faire apparaître l'info-bulle, puis faites un clic droit comme si vous vouliez sélectionner "Inspecter l'élément". En laissant ce menu contextuel ouvert, déplacez le focus sur les outils de développement. Le code HTML de l'info-bulle devrait s'afficher à côté de l'élément pour lequel elle existe dans le code HTML. Vous pouvez alors l'examiner comme s'il s'agissait d'un autre élément. Si vous retournez dans Chrome, le code HTML disparaît, c'est donc un élément à prendre en compte.
C'est un peu bizarre, mais ça a marché pour moi, alors j'ai pensé que je devais le partager.
Cette solution fonctionne sans aucun code supplémentaire.
Hit command-option-j pour ouvrir la console. Cliquez sur le bouton en forme de fenêtre dans le coin supérieur droit de la console pour ouvrir la console dans une autre fenêtre.
Ensuite, dans la fenêtre de Chrome, survolez l'élément qui déclenche le popover, cliquez sur command-` autant de fois que nécessaire pour se concentrer sur la console, puis tapez debugger . Cela va geler la page, puis vous pourrez inspecter l'élément dans l'onglet Éléments.
Il vous suffit de forcer l'affichage de l'infobulle comme suit
$('.myelement').tooltip('open');Désormais, l'infobulle s'affichera quel que soit l'état du survol.
Faites défiler la page vers le bas du DOM où vous devriez voir le balisage.
Mise à jour voir le commentaire de cneuro pour Bootstrap 3.
$('.myelement').tooltip('show');Mise à jour voir la réponse de Marko Grešak pour Chrome et apparemment Safari aussi, $0 peut être utilisé comme un raccourci pour l'élément actuellement sélectionné. Cela semble fonctionner également dans Safari.
$($0).tooltip('show')
Cliquez sur f12 allez dans l'onglet console et ajoutez ce qui suit :
setTimeout(()=> {debugger},5000)Cela vous donnera 5 secondes pour faire ce que vous voulez et il se cassera à 5 seconds . Ensuite, vous pouvez inspecter l'élément cible
(ex. survoler l'élément et attendre 5 secondes puis inspecter )
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
