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 at 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 a 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 section settings, you can assign the main hero image and change tooltips text, background, and focus colors. You can add, edit or remove tooltips through 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 fall back to a plain text list.
Great resources
- Steve Faulkner: Simple standalone toggletip widget pattern
- Heydon Pickering: Tooltips & Toggletips
Questions and improvements
If you are using this section, I am looking forward to seeing it. For questions, improvements, or bugs please open a Git issue or contact me. Happy to hear your feedback.