Tooltip: Giving more context to your users!

Story

In the field of web development, we strive to make it easy for users to interact with our sites. This ease usually comes with lots of helpful pieces of information that accompany all call-to-action elements in our user interfaces.

Definition

A tooltip is a hidden user interface element that gets revealed upon user request(hover or click), in order to provide more information about another element of interest.

Implementation

  • Styling
  • Preventing Tooltip from closing when user move mouse over it from the call to action element.
  • Position Tooltip relative to the viewport for off-screen cases.
  • Checking for Off screen positioning

Challenges

Now that we know how useful tooltips are, let us look at challenges that arise when implementing them:

  1. Tooltips can go off screen when the call to action element is close to the left or the right corner of the page. Addressed in the above implementation.
  2. Tooltips can interfere with main task of the call to action element on touch devices. Still looking for a proper solution, comment if you have one!

Resource

--

--

Always debugging, because problem knowledge equals half the solution!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcellin Nshimiyimana

Marcellin Nshimiyimana

Always debugging, because problem knowledge equals half the solution!