Skip to content

Instantly share code, notes, and snippets.

@robcmills

robcmills/openspace-tooltip-challenge.md

Last active January 31, 2024 19:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robcmills/4bf674533c37a9124ab643f281f9a223 to your computer and use it in GitHub Desktop.
Save robcmills/4bf674533c37a9124ab643f281f9a223 to your computer and use it in GitHub Desktop.
Download ZIP
OpenSpace Frontend React Tooltip Coding Challenge
Raw
openspace-tooltip-challenge.md

OpenSpace Frontend Interview React Tooltip Challenge

In order to assess candidates technical competence, especially in React, we ask them to build a Tooltip component.

Challenge 1

challenge 1

Implement the simplest possible version of a Tooltip. Render a "target" div in the center of the screen and on hover show a "tooltip" div to the right of it.

The size of the target element is determined by the consumer of the Tooltip component. As the library author, you must dynamically determine the target size in order to position the tooltip correctly centered, and to the right.

Challenge 2

challenge 2

Building on the previous challenge, wrap the target in a scroll container, add several targets, give the container a fixed height and change the css to overflow-y: scroll;

Ensure the Tooltips are not cut off by the hidden overflow.

Challenge 3

challenge 3

Observe the behavior of the tooltip when the user scrolls the list.

Improve upon your existing implementation such that the tooltip disappears when the user scrolls the list. It does not need to reappear when the user stops scrolling, but it should reappear when the user hovers as before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment