User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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).
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:
Better solution, when element is on top of the screen, then display the tooltip to the bottom:
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
