Content Overlays

Impress your users with style and information.

What it does

Content overlays are a customization to create visually appealing and informative pop-ups when users hover over special links. These were inspired by the overlays you see on Wikipedia. It is a great way to provide additional contextual information in-line, without having to redirect the users elsewhere. If they want to get the full additional information they can always click on the overlay to go to the source page.

Why you need it

This is a great way to impress users with style and information.

Feature Details

  • It pulls content from a single ThoughtFarmer page. So editing, and adjusting the HTML content is easy.
  • It uses the summary from the source page, so you can have one version for the overlay, and a full one for the actual page.
  • It supports multiple layouts. The image can be above, below, right or to the left of the text. Or just a text only overlay.
  • It supports overlays of configurable size. 
  • It will always position optimally for where the mouse is hovered. Either above\below or left\right of the cursor position.
  • It will automatically readjust the layout if the overlay is too wide for the current device or screen. 
  • It supports touch on mobile devices. One touch to trigger the overlay, a second to navigate to the page.





Configuration Instructions

See the configuration instructions for details.


For a full demonstration please see the page Content overlay demo. You can see on the child pages there the sources of all the various overlays used.