2

I'm building a UI Kit and I'm trying to define the best position for tooltips to be displayed.

Some thoughts: On charts, I believe the tooltip should be displayed on the top of the pointer; On touch devices, the tooltip should be displayed on top because if you are pointing up it's probable that your finger will hide what's on the bottom;

Do you have any recommendations about this?

2 Answers 2

3

This is likely a very opinion-oriented question, but I do have a personal rule: Tooltips should never get in the way of the experience.

  • They should not cover the object being controlled by the button the tooltip is attached to. For example, a checkbox next to descriptive text (the tooltip shouldn't obscure the text) or a slider controlling a displayed response (the response should not be covered by the tooltip).

  • And, in my opinion, tooltips should not be between the cursor (or finger for mobile apps) and the control. Regrettably, your available "white space" may not be large enough to always follow such recommendations (especially with mobile apps).

1

It is also about the recent position of the element (the tooltip is attached to) on the screen.

When it is on the top and the tooltip pops up on top, it could be outside the screen. Example:

Example 1

Better solution, when element is on top of the screen, then display the tooltip to the bottom:

Example 2 Solution


The same goes for elements on the bottom of the screen, then display the tooltips on top.

By the way, I am using the tooltip library: https://github.com/q2apro/webui-popover

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.