Popups is an extension that displays a preview of a page when hovering over a link to it. By default, this only works when hovering over mainspace pages, and the popup uses that page's lead section and its page image for the preview.
Options[]
This feature can be enabled or disabled via the Appearance tab in User preferences. The relevant section is labelled "Reading preferences".
Styling[]
Because popups only appear on mouse hover, inspecting and styling them can be a little difficult.
The simplified class structure of a popup is as follows. Note that there are additional classes and elements that have been trimmed for this explanation.
<div class="mwe-popups"> <!-- this will have additional classes such as "flipped-y" depending on page position -->
<div class="mwe-popups-container">
<a class="mwe-popups-discreet">
<svg>
<image/> <!-- this is where the preview image will be, if available -->
</svg>
</a>
<a class="mwe-popups-extract">
<!-- this is where the preview text will be -->
</a>
<footer>
<a class="mwe-popups-settings-icon mw-ui-icon">
<!-- this is the settings gear -->
</a>
</footer>
</div>
</div>
If your wiki is encountering an issue where the popup will extend over the link, causing the popup to disappear and looping this behavior, try this fix:
.mwe-popups.flipped-y,
.mwe-popups.flipped-x-y {
margin-top: -30px;
}