Now let us be clear, WordPress themes and plugins have been operating in Z-index space for many years. Sliders, animations, and popup modals have been on the WordPress UI scene placing images and objects above a web page. Also think of tabs, accordions,  gallery lightboxes, and background hero images revealed in parallax glimpses. But with modern PageBuilders the move to CSS z-index values is more prevalent. It will also be crucial to the development of true drag and drop visual editors to which Gutenberg aspires.

The new Brizy PageBuilder comes closest to delivering true drag and drop flexibility so far among the top-end PageBuilders like Beaver Builder, Divi, Elementor, Thrive Architect and Visual Composer. But none of these WP PageBuilder match the flexibility and layout capabilities of Wix,  Smart Slider, or Slider Revolution [take a look at the single page creation prowess of the two top end sliders].

So this starts a series of reviews  about WordPress plugins that allow users to invade the WordPress z-index  space with UI elements. We start simple with WordPress tooltips because they have all the elements of  z-index layer management:1)creating, positioning  and filling the tooltip layer;2)sizing the layer and responding to responsive changes;3)handling overlap, sticky  conditions and opacity requirements;4)finally how tooltips handle moving and closing operations.Note these UI operations are part and parcel of operating in Z-index space, so solutions arrived at by the tooltip tools will suggest what is possible for other z-index UI widgets.

Three Free Tooltip Plugins

Simple tooltips does just that – allowing for making tooltips using a simple shortcode with a full list of options :

• bubblewidth (integer, in pixels) – Sets the max width for tooltip bubble. If you are trying to fit an image inside the bubble, and the image is too big for the tooltip bubble area, try adjusting the max bubble width to make sure it is big enough to the fit the desired image.
• bubbleopacity (integer, between 0 and 1) – Sets the bubble opacity. 0 is invisible and 1 is totally solid.
• bubblebgcolor (color name or hex value) – sets the bubble background color. Could be a color name, like green, or a hex value, like #666666.
• bubbleposition (left | center | right) – the position of the tooltip, relative to the trigger element
• bubblecolor (color name or hex value) – sets the bubble text color. Could be a color name, like green, or a hex value, like #666666. or a hex value.

Here is a ToolTip.[simple_tooltip bubblewidth=’240′ bubbleopacity=’1′ bubblebgcolor=’#99cc99′ bubbleposition=’center’ bubblecolor=’red’ content=’This content appears in the tooltip bubble. It is a simple descriptive content.’]Hover here to see the tooltip[/simple_tooltip]

And here is shortcode  for the above tool tip|simple_tooltip bubblewidth=’240′ bubbleopacity=’1′ bubblebgcolor=’#99cc99′ bubbleposition=’center’ bubblecolor=’red’ content=’This content appears in the tooltip bubble. It is a simple descriptive content. ‘]Hover here to see the tooltip[/simple_tooltip |Note the tooltip uses a double underline to indicate its presence. This does not come with the Simple Tooltip plugin. So add the following style to your code [check out the Embed Code plugin]:So Simple Tooltips delivers on the promise of allowing users to add tooltip shortcodes wherever they want. In the Visual Editor there is a Tooltip button that adds a standard shortcode wherever you want to add a tooltip. Simple and effective.

Tooltipy provides a different approach to tooltips. Instead of marking each keyword with a shortcode, users create a glossary of  tooltip wordswith their associated  descriptions that can include an image.

By default each glossary keyword can then be triggered as they appear in any page, post, and widget. However, users can control which pages and posts are “covred” by the glossary. In addition specifc key word Then each glossary word can be made avilable to display by hovering over it to show the popup description. This glossay method is used by other WordPress tooltip plugins.

There are a number of  Tooltipy innovations:

• A keyword can have several synonyms, each of which will display the associated description
• Each keyword will appear ready for tooltip triggering on all pages, posts, and widgets
• Each keyword can be limited to one display per page
• Users can limit appearance of keywords on specific pages or posts – Pro
• Users can import and export glossaries between websites
• Users can also import keyword tooltips from other tooltip menus systems
• A tooltip can be attached to a specific image – Pro
• Settings allow users to control background and text color plus tooltip dimensions and positioning
• Tooltips highlighting can be styled – Pro
• A widget that show a list of all the keywords on a page or post
• Autogenerated glossary page of currently active keywords
• Add keyword tool tips to custom post types like Woocommerce products or Rental calendars – Pro

In sum, Tooltipy provides a robust tool for creating tooltips that a)are numerous and b)need to be applied on several pages and/or posts. In addition, there is a Pro Version that is available for $20US for one year of updates and support.

PopUp Builder is a versatile tooltip and general popup builder. Here we have[sg_popup id=”5″ event=”click”] a sample tooltip popup[/sg_popup]. <= click to activate the tooltip.

In the next example we show [sg_popup id=”12″ event=”hover”]a tooltip built with an image[/sg_popup]. Also note that the tooltip is triggered by hovering over the text no need to click on it.

However there is a problem with using Thrive PageBuilder with Popup Builder. The Insert Popup button of Popup Builder does not work in Thrive Architect . This is a problem with most of the PageBuilder syncing with other plugins like Popup Builder.

But give Popup Builder credit, it has the full power of the Classic Editor to do the layout of  Tooltip content. So users can create any look and feel for the tooltip/popup. In addition it has an immense array of options and controls for how the tooltip works:

• Dismiss on pressing “ESC” key
• Show “CLOSE” button
• Delay showing “CLOSE” button for user specified number of seconds
• If content does not fit in tooltip area, allow  content scrolling
• Disable page scrolling
• Enable  repositioning/scaling for responsive  adjustment of tooltip when screen size changes:
• Dismiss/close on overlay click or content click
• Reopen after form submission
• Set tooltip/popup background image:
• Set overlay color and its opacity
• Set background color of content area and its opacity
• Set opacity for background color of overlay
• Set Overlay and Content area  custom class values and z-index
• Set content area padding:
• Set tooltip popup location

This is an impressive list of tooltip/popup options. And there are at least a dozen more plus added types of toolti modes in the Pro version which sells for $25US/year for a single site license.

Summary

So in our first excursion into WordPress Z-index Space we have found  3 tooltip plugins that add successively more features as they allow users to add popup tooltips as layers  on top of their page or post. All three tooltip plugins have simple trigger and close functions, reasonably robust choice of contents with user customized styling and positioning. All three performed well in both opening and closing the tooltips.

Simple Tooltips  has the least flexibility in contents features and styling while Tooltipy improves and Popup Builder provides the most complete set of features , display options and styling. All three tooltip plugins worked well in responsive situations – repositioning, resizing and adding scrollbars to tooltips when displaying on tablets and mobile phones.

Yes tooltips involve simple layering being  fairly simple ventures into multi-layered design space. All three tooltip were  modal. Opening multiple tooltips is not in the cards nor is dynamically moving or resizing the tooltips. Yes animations are available for  Tooltipy and Popup Builder. But essentially, these tooltips tools are working in 2-layer space. Our next WordPress Z-index Space review will look at WordPress tools that embrace multi-layers plus drag and drop plus resizing in design layouts. Stay tuned.