tooltips.liquid in your theme sections folder and
tooltips.js in your assets folder. The CSS styles are included inline in tooltips.liquid.
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.
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.
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.
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.
This section supports multiple instances installed on the same page. Each instance is exposed through a simple API added to the global
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.