If you move your cursor over the links on for example https://en.wikipedia.org/wiki/Climate_change, a small preview of the page in question appears. How exactly is that done? I know it’s done with Javascript, but I cannot make out a readable function from what DevTools provides.
Watching the network tab on the console, when I hover my mouse over one of the links, the page first does a GET to load.php, then a GET to an image. I notice the popup always seems to consist of the first block of text (probably the same # of characters, but I didn’t count) and the first image present on the page. So I presume the JS, once it gets those two pieces of info, builds and displays the popup using them.
I already figured as much, but your tip on using the Network tab and then hover over a link did put me on the right track.
If you open DevTools and click on Network, then hover over the first link on the page, Climate variability and change, and then under Name click on the line with the same text, a URL will appear: https://en.wikipedia.org/api/rest_v1/page/summary/Climate_variability_and_change. That’s a JSON file and if you click on Pretty Print in Chrome, you will see that it contains the link to the used image and the used text fragment.
Then it’s just a matter of a Javascript function that creates a div with the said image and text.