Shopify Product Tooltips / Toggletips

Simple, accesibile and performant.
Provide additional explanatory content
and showcase your product features.
Section code available on GitHub

Installation

Copy tooltips.liquid in your theme sections folder and tooltips.js in your assets folder.
The CSS styles are included inline in tooltips.liquid.

Performance

The code is very light and does not require any 3rd party libraries like jQuery. Written in Vanilla Javascript, tooltips.js compiled and gzipped will be under 2KB. By default this is loaded defer, preventing render blocking.

The hero image is responsive using the <picture> element with few <source> elements. Please have a look on the default picture sizes and configure the source sizes and media queries depending on your page layout.

Accessibility

A great deal of pain was put into this section to make it accessible. There are several patterns out there, the one used for this component is a slightly modified version of Steve Faulkner's toggletip widget pattern. The tooltip controls are real buttons and have ARIA expanded attributes. The displayed content is an aside element placed next in DOM order after the button.

The tooltips can display or dismiss content on mouse click and also be operated by keyboard. By using buttons we are getting “for free” keyboard interaction. Tab press will change the focus, Enter will open/close the tooltip.

This component uses CSS animations to transition between the open/collapsed states. The animations are bounded to the prefers-reduced-motion CSS media feature for users that wish to disable them.

Responsive design

On small devices there isn't enough space to display the expanded tooltip. The component will present its items as a collapsible list. Adapting the UI and providing different views is a good approach for this situation.

Section settings

In the sections settings you can assign the main hero image and change tooltips text, background and focus colors. You can add, edit or remove tooltips trough the section blocks. Each tooltip block has a title, HTML description and top/left position. Top and left are percentual values. This allows the tooltip to preserve the position regardless of the screen size.

The section settings contain a media query breakpoint value. By default this is set at 768px. The section will change its layout depending on this media query. Custom set this breakpoint value according to your needs.

Code setup

tooltips.liquid contains the section settings, CSS styles, Liquid markup, as well as the theme editor JavaScript logic.

tooltips.js has the JavaScript interaction. This script is loaded from tooltips.liquid.
This section supports multiple instances installed on the same page. Each instance is exposed through a simple API added to the global window.SectionsDesign object.

No JavaScript

No worries, this component has a progressive enhancement design. Without JavaScript we will fallback to plain text list.

Great resources

Questions and improvements

If you are using this section, I am looking forward to see it. For questions, improvements or bugs please open a Git issue or contact me. Happy to hear your feedback.