Community Central
Community Central

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;
}

External links[]