This ticket is related to this [[ https://phabricator.wikimedia.org/T311667 | ticket ]] for providing the quick view turn on/off setting.
**Problem:**
Quick view is a new feature that will be introduced on special:search page. Some users especially editors (or advanced users) may not want that as part of their experience. Some readers may not immediately notice the change.
**Solution:**
A tutorial/message that would introduce quick view to both readers and editors and also inform them about an option to turn it off in the settings if they wish to.
**Acceptance Criteria**
[] Show the onboarding pop up when the user first sees the results on the special search page.
[] The onboarding pop up should point at the snippet of the first result. (The pop up is a standard component in design system.)
[] Show the icon, title and text as shown in the pop up in the mocks.
[] Have the blue icon pulsate. This is a standard component in design system.
[] Show the arrow (the one that shows up on hover) of the first snippet while the onboarding pop up is up.
[] Close button on the pop up should close the pop up and also hide the arrow next to the first snippet
[] Automatically close the pop up when the user clicks on a snippet (any snippet on the page). Also open the preview when the snippet is clicked.
[] Link to preferences will take users directly into search preference in a new window.
[] Ensure that any interactions immediately under the pop up are disabled while the pop is up.
[] Do not show the onboarding pop up again to the same user. Are we able to determine that for logged out users?
[] If the user performs another search on the page consider the onboarding pop up as seen and hide it or and do not show it again if they go back.
[] If the user clicks on any link on the page that takes them to a new page consider the onboarding pop up as seen and hide it next time or if they go back.
[] Doing any interaction on the page that does not leave the page or open a new page (except clicking on the snippet) will not hide the pop up.
[] The code should be simple to remove in the future (e.g. we do not want classes and code scattered everywhere, but in a nice folder with all the info in it)
**Detailed specs:**
Link to specs in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=2756%3A46393 | Figma ]]
{F35506727}