Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Dev Tools. What is happening here?

  • 3 replies
  • 1 has this problem
  • 3 views
  • Last reply by p3ppi

more options

Hello,

I am learning to look at websites with help of the development tools and the inspector tab and I am trying to get into how the web works and how the different programming languages interact and so forth. When moving the mouse over parts of the website, the relating code is highlighted in the inspector tab. I am having an issue as follows:

The first image shows a part of the website code. The mouse cursor is on no specific position, I marked its position with a blue arrow.

In the second image the mouse is over the red "free options" button and in the inspector tab a div appears out of nowhere. It does not appear in the code unless the mouse is moved over the button and disappears as soon as the mouse leaves the button. I have never seen that before (maybe because I am a beginner) and have no clue what happens there.

Is that done with javascript? Or with php? Or with css? Or anything else? What happens there and how can the actual code change?

In the inventor tab, does the code have to do with the DOM rather then the sourcecode of the website is that right?

Please give me some light =)

regards p3ppi

Hello, I am learning to look at websites with help of the development tools and the inspector tab and I am trying to get into how the web works and how the different programming languages interact and so forth. When moving the mouse over parts of the website, the relating code is highlighted in the inspector tab. I am having an issue as follows: The first image shows a part of the website code. The mouse cursor is on no specific position, I marked its position with a blue arrow. In the second image the mouse is over the red "free options" button and in the inspector tab a div appears out of nowhere. It does not appear in the code unless the mouse is moved over the button and disappears as soon as the mouse leaves the button. I have never seen that before (maybe because I am a beginner) and have no clue what happens there. Is that done with javascript? Or with php? Or with css? Or anything else? What happens there and how can the actual code change? In the inventor tab, does the code have to do with the DOM rather then the sourcecode of the website is that right? Please give me some light =) regards p3ppi
Attached screenshots

Chosen solution

Hi p3ppi, From what I can gather the div that appears in the 2nd image is for the "This product requires payment" black tool tip. The tooltip and the div is generated using popper and Javascript only when you hover over the "Free options" button. Link to popper: https://popper.js.org/docs/v2/tutorial/

Read this answer in context 👍 1

All Replies (3)

more options

Hi p3ppi, From what I can gather, the div that appears in the second message is for the "This product requires payment" tool tip that is generated using popper and Javascript only when you hover over the "free options' button. Here is a link about popper: https://popper.js.org/docs/v2/tutorial/

more options

Chosen Solution

Hi p3ppi, From what I can gather the div that appears in the 2nd image is for the "This product requires payment" black tool tip. The tooltip and the div is generated using popper and Javascript only when you hover over the "Free options" button. Link to popper: https://popper.js.org/docs/v2/tutorial/

more options

Thank you very much