**Main components:**
* Query Service UI
**User story:**
As someone who needs help with writing queries, I want to learn about and navigate to Query Builder from the QS Interface in order to build my queries visually.
**Problem:**
As someone who needs help but doesn’t even know that the Query Builder exists, it would be difficult to discover the tool for help.
**[[ https://www.figma.com/file/hZpaYX0xNNhK0L7kBvN6WK/Query-Builder?node-id=3281%3A137 | mockups ]]:**
{F34131427}
gif:
{F34408488}
TODO: Normal state, Hover state, and gif
**BDD**
GIVEN a user using the Query Service,
WHEN the user hovers over the ‘Query Builder’ button on the top area,
THEN a modal will open under the button showing a title, text, and gif,
AND it will be visible as long as the user continues the hover behavior.
GIVEN A user using the Query Service,
WHEN the user clicks on the ‘Query Builder’ button on the top area,
THEN Query Builder will open in a separate browser tab.
**Acceptance criteria:**
*The ‘Query Builder’ button should be the same as the existing buttons in the Query Service at the top area.
* The gif plays automatically. it must be visible as long as the user hovers on the bottom and/or the tooltip area.
**Open questions:**
* How should UX provide the gif for the developers?