The Dropdown and Tooltip elements reveal extra content on demand — dropdowns on click, tooltips on hover. Both use the same positioning controls, so once you understand one, the other follows the same pattern.
Insert a dropdown or tooltip
Open the Insert panel from the left sidebar.
If the panel is showing templates, click Switch to elements.
Open the Advanced category. You'll find these presets in two places:
Interactive — Dropdown and Tooltip.
Navigation — Dropdown (the same preset, handy when building header menus).
Click or drag the preset onto the canvas.
Layer structure
In the Layouts & layers panel, expand the element to see:
Dropdown container (or Tooltip container) — the wrapper.
Trigger — the button, label, or icon visitors interact with.
The panel that appears when triggered, holding its content. For a dropdown this is a list of link items; for a Tooltip it's a compact text box.
The two share the same structure — only the default styling and trigger behavior differ.
Position the panel
Select the dropdown or tooltip panel layer to adjust where it appears relative to the trigger:
Anchor — which side of the trigger the panel attaches to: Bottom, Left, Top, or Right.
Align — how the panel aligns along that edge: Start, Center, or End.
Offset — distance in pixels between the trigger and the panel.
These settings matter most in headers, where a menu must open downward without clipping off-screen.
Trigger behavior
Dropdown — opens on click by default. Visitors click the trigger, see the menu, and click outside or select an item to close it.
Tooltip — opens on hover. Useful for short explanations next to form labels, icons, or abbreviations.
To change what the trigger shows, select the Trigger layer and edit its text, icon, or styling like any other element.
Build a navigation menu
For header navigation, insert the Dropdown preset from Advanced → Navigation. Style the trigger as a menu label and add link items inside the panel for each destination. Each item supports Instant's standard link settings, including Shopify page and collection links.
To wire a custom button to an existing dropdown, select that button, add an action on the Interactions tab, and choose Toggle dropdown.
Tips
Keep dropdown menus to a reasonable number of items — long lists are hard to use on mobile.
Keep tooltips to one or two short sentences; they disappear on mobile tap, so don't hide critical information in them alone.
Check positioning at different breakpoints; an anchor that works on desktop may need adjusting on tablet.
Rename triggers and panels in Layouts & layers when a layout has several dropdowns, so interactions target the right one.