Set the WordPress page preview tooltips with Revealer 2.0

Revealer displays a WordPress page preview in the pop-up tooltip for Pages and posts. The plugin allows users to see the contents of the post before going to the page. Revealer improves the user experience and is very convenient because it will enable you to navigate the site’s navigation better.

Notes

This manual was created for plugins version 2.0.0 and higher. If you use plugins of an older version, use the Revealer settings manual for versions 1.0.^.

Installing of the Revealer WordPress page preview plugin

To install the plugin, read the article Installing WordPress Plugin. Installing the plugin takes only a few seconds.

To open the plugin settings slick Settings below plugin name on the plugins page

WordPress page preview - Revealer on the plugins page
Revealer on the plugins page

or in the WordPress Sidebar menu go to Revealer

WordPress page preview - Revealer in the WordPress sidebar
Revealer in the WordPress sidebar

In the plugin settings, there are several tabs responsible for various groups of plugin settings.

General settings

WordPress Page Preview plugin already has initial settings allowing you to use it without additional configuration. But you can change any default settings so that the plugin better suits your WordPress site or theme.

Selector

Set CSS selectors when hovering over which pop-ups will be shown. Selectors setting are individual for every WordPress theme. However, in most cases, use article p a selector to display popups in the content of the article. You can specify multiple selectors separated by commas.

Prefetch content

The option loads content for all selectors asynchronously to speed up the appearance of a pop-up. Especially useful for hosting with not very high performance.

Pop-up size

In the Size field, set the desired popup width.

Excerpt length

Set the number of words that will be shown in the popup. The text will be taken from the expert, or from the first paragraph of the article.

Custom field

The option allows you to display the data from the post custom fields instead of a regular post excerpt. To do this, you need to insert the name of the custom field that is added to the post displayed in the Revealer tooltip.

Paste the custom field name

Allow HTML

The option allows you to display the description text style in the tooltip as entered in the post/page. When the toggle is disabled any markup is escaped in the text.

Follow cursor

The tooltip will follow the cursor while the cursor hovers over the link.

Layout

The section allows you to flexibly customize the display of elements in the tooltip.

Manage elements in the tooltip
Top bar order

Select the available items from the list and order them to display at the top of the tooltip. The option supports custom taxonomy and custom fields.

Content order

Select the available items from the list and order them to display at the content part of the tooltip. The option supports custom fields.

Bottom bar order

Select the available items from the list and order them to display at the bottom of the tooltip. The option supports custom taxonomy and custom fields.

Image position

This setting sets the position of the image relative to the text inside the popup. You can choose one of the following options:

  • Top
  • Bottom
  • Left
  • Right
  • Top or Bottom
  • Top or Left
  • Top or Right
  • Bottom or Left
  • Bottom or Right
  • Random

Image size

In this setting, you can choose what size the image will be used in the tooltip. Choosing the right size can speed up image loading. You can choose one of the predefined sizes from your Theme of WordPress media library.

The settings tab configure links for which tooltips will be applied.

Posts and Pages

A toggle to enable/disable popup tooltip display for WordPress Posts and Pages links.

Category

A toggle to enable/disable popup tooltip display for Category link.

Tag

A toggle to enable/disable popup tooltip display for Tag link.

Author

A toggle to enable/disable popup tooltip display for Author page link.

WooCommerce Product

A toggle to enable/disable popup tooltip display for WooCommerce products with price and rating.

External Links

The option allows you to display the popup tooltip not only for internal site links but for external pages/posts.

Design Settings

On the Design tab, you can customize the style and design of the tooltip. For a more detailed and fine-tuning, use the CSS class .mdp-revealer-box. You also can disable some links by adding class .not-revealer to the link.

Style

This setting is responsible for the overall appearance of the pop-up window. The plugin has three tooltip styles:

  • Rectangle
  • Rounded rectangle
  • Image in background

Arrow

Using this setup you can set the type of arrow displayed along with the tooltip. The following modes are available for selection:

  • Without arrow
  • Sharp
  • Round

Background color

Popup background color settings.

Text color

Text color. You can clear this field to apply default theme color settings.

Animation

Choose from five predefined initial animations options:

  • Shift Away
  • Shift Toward
  • Fade
  • Scale
  • Perspective

You can see how animations look on the animation page.

Save Changes in the WordPress page preview plugin

Do not forget to click Save Changes after changing plugin settings. After clicking this button, the settings will be saved and applied to all pages of the website.

Hosting for WordPress

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?