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? – Alejandro Veltri 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.

| improve this answer | |
  • Can you add a little bit more explanation as to how your solution works? Is it a grid system? What is it exactly? – RobbyReindeer 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.

| improve this answer | |
  • That would be "below", not "bellow" – FKEinternet 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).

| improve this answer | |

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.

| improve this answer | |

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.