Information balloons are balloons that appear when the mouse is placed on them, and in some cases – only when clicked. They serve to provide information related to a specific element or term. Information balloons are a form of meta information. That is, information that refers to other information, with the second one intended to explain the first one.
You can read more about meta information in our article about page “kolichka”.
Information
In order for information balloons to be useful and meaningful, it is good that the information in them is presented clearly and briefly. Considering that this is a balloon that contains meta information, try to explain more clearly what is already visible.
For example, where the user should click, what a given term means, what a given number refers to.
Contrast
Again, as you will see in our articles on tables and navigation, contrast does not have to be bright, as long as it is visible and does its job – to separate one element from another. In this case, since information balloons are generally not visible, you can make them with denser colors, no matter what the background of the place where they appear. It is important to know, however, that text is easier to read on a light background with dark letters than vice versa. However, information balloons are expected to contain little and explanatory information, so you could make them a darker color, as long as there is enough contrast between them and the background of the page, and between them (the balloons) and the text they contain.
Visibility
Information balloons are usually displayed when the user hovers over the icon or text they are explaining.
Also, keep in mind that these balloons should only be displayed one at a time; if a second one is activated, it is a good idea to automatically hide the first one. Also, balloons should not hide the information they refer to.
Hide
Depending on how large the information balloon is, you could also add a way to turn it off that is different from moving the mouse over another element. For example, you could put an X in the upper right corner or just the text “Close” below the balloon. Normally, balloons automatically hide when you move the mouse pointer, but this can also create difficulties. You should consider your specific situation and must test.
