How Firefox Displays Tab Hover Previews and Domain Info

This article explains the mechanics behind the tab hover preview feature in the Mozilla Firefox web browser. It covers how Firefox captures and caches visual snapshots of web pages to display as thumbnails, how it extracts the full page title and domain information, and how the browser manages system memory while keeping these previews instantly accessible to the user.

The Hover Trigger Mechanism

When you move your mouse cursor over a tab in Firefox, an internal event listener detects the hover action. To prevent previews from flashing annoyingly as you move your mouse across the screen, Firefox uses a brief delay timer. Once the cursor rests on a tab for a few milliseconds, the browser triggers a popup card directly beneath the tab.

Generating and Caching Page Thumbnails

Firefox does not load a live version of the webpage inside the tiny preview box, as doing so would consume massive amounts of computer memory and processing power. Instead, it relies on static snapshots.

  1. Viewport Capture: When you actively view a tab, Firefox’s rendering engine (Gecko) takes a snapshot of the currently visible area of the webpage, known as the viewport.
  2. Compression and Storage: The browser scales down and compresses this image, storing it temporarily in your computer's RAM.
  3. Retrieval: When you hover over that tab later, Firefox instantly pulls the compressed image from the cache and displays it inside the preview card.

If you open a link in a new background tab and hover over it before ever clicking on it, Firefox may not display a thumbnail. Because the page has not been brought to the foreground, the rendering engine skips taking a snapshot to save resources, displaying only the text information instead.

Extracting Domain and Title Information

Above or below the thumbnail, the preview card displays critical text data so you can identify the tab's contents when the tab bar is too crowded to read. Firefox extracts this data directly from the webpage's code and the browser's navigation API.

  • Page Title: Firefox pulls the text from the webpage's HTML <title> tag. While the tab itself might cut off a long title, the hover preview expands to show the full text across multiple lines.
  • Domain Information: Instead of showing a long, confusing web address, Firefox parses the URL to extract only the host domain (for example, showing wikipedia.org instead of the full article URL). This provides a clean look and acts as a security feature, allowing you to verify the actual website you are on before interacting with it.

Memory Management

Storing image previews for dozens or hundreds of tabs can slow down a computer. Firefox manages this by strictly limiting the resolution of the thumbnails. Furthermore, if your computer begins to run low on memory, or if Firefox puts an inactive tab to "sleep" (unloading it to save RAM), the browser will discard the cached thumbnail. The domain and title information, which require almost zero memory, will still appear when you hover over an unloaded tab.

Customizing the Preview Behavior

Firefox allows users to control how much information is gathered and displayed during a tab hover.

In the standard Firefox Settings menu under the General tab, users can toggle the Show an image preview when you hover on a tab setting. Turning this off tells Firefox to stop displaying the cached thumbnails, reverting the hover card to a simple text box that only shows the page title and domain.

For advanced control, users can type about:config into the Firefox address bar to access hidden preferences:

  • browser.tabs.cardPreview.enabled: Toggles the entire modern hover preview system on or off.
  • browser.tabs.cardPreview.showThumbnails: Specifically enables or disables the visual thumbnail while keeping the domain and title card active.
  • browser.tabs.cardPreview.delayMs: Adjusts the exact millisecond delay required before the preview card appears when mousing over a tab.