I defined a global tooltips behavior for the developers to use in all cases they will face as a guideline. I did a research about this issue but I didn't find anything really relevant. Finally, I decided to divide the screen into 6 parts, where in each area the tooltips will behave differently: Top: left, middle, right. Bottom: left, middle, right.

See below the map I created:

Is there any other way to define it?

enter image description here

  • 2
    What is the purpose of creating this map? what do you want to communicate o specify? Aug 7 '17 at 15:50
  • Why not always the same tooltip, and change the position/size where it opens if the default position wont fit, like operating systems do.
    – ColdCat
    Feb 4 '18 at 0:39
  • 1
    @ColdCat I think that's what the image is meant to convey: depending on which "region" the item-being-tool-tipped is located, you drop-down/push-up from where the mouse is, and either display the box to the right/centre/left of that point. I would also question whether the OP "created" this map, since I'm almost certain I've seen it (or a very close variant) before in one of the standard web frameworks.
    – TripeHound
    Jun 7 '18 at 9:39

enter image description here

I've faced similar issue

I'm more comfortable with the following layout, since it take less note of variations and is uniform throughout most of the screen.

Although this problem doesn't arise if a proper plugin is used by the developer.

  • Can you add a little bit more explanation as to how your solution works? Is it a grid system? What is it exactly? Apr 30 '19 at 13:29

If the default tooltip position is set to below and on the right of the mouse pointer coordinates (bottom-right), check against 2 window edges (bottom and right) and set 2 rules:
Rule 1: If it overlaps the bottom edge move it above (up).
Rule 2: If it overlaps the right edge of the window, align it to the right edge.

With this behavior, in most cases tooltips will hide less usefull/relative content (text/lists) from users
and developers will love you.

  • That would be "below", not "bellow" Aug 7 '17 at 7:46

If I'm reading your graphic correctly:

  • If the activation point (AP) is in the top half of the screen, the tool-tip should descend below the AP, otherwise it should ascend above the AP.
  • If the AP is in the left-hand eighth [estimated] of the screen, the tool-tip should extend to the right of the AP. If it is in the right-hand eighth, then the tool-tip should extend to the left. Otherwise, it should be centred on the AP.

If the situation warrants it, you may need to specify what happens if the above rules mean the tool-tip would go off the screen (i.e. a very long tool-tip activated near the centre of the screen).


Your question doesn't tell much what research you did. In case your research was reading documents or asking colleagues I suggest you to build a UI prototype and test with your intended users. Then you'll know for sure.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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