UI Elements

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element

4.11.1 Guideline

Guideline for the tooltip are listed below.

  • The user hovers the pointer over an item, without clicking it, and a tooltip will appear a small "box" with information about the item being hovered/clicked.
  • Tooltip occurs with a 270 Degrees V-shaped arrow pointer from the placeholder as shown in the image. Color of the arrow will remain the same as border of the tooltip. Size of the arrow will be 8PX height and 16PX width. Arrow will be placed from 15PX distance from the tooltip placeholder border as a part of tooltip. Arrow can be at top/bottom/left/right of the placeholder depending on the beahvior.
  • Placeholder will have White(#ffffff)   color and border color will be Gray(#d8d8d8)   with 1PX in size. Placeholder will have 15PX padding. Font color inside tooltip can be in SkyBlue(#2991d6)  or DarkGray(#5c5c5c)  & size will be 12PX.
  • Border color for placeholder and tooltip arrow color will change for the validation as we have specified colors for error, warning and success validation messages.
  • Text inside Tooltip can be in a single line or multiple line with single line will have maximum character 50 above that it will start in new line.
  • Tooltips usually appear either by clicking or mouse over action, tooltip appears on any action, will be visible in touch screen devices. I.e To see any validation message, user will have to trigger the respective action, while tooltip appear on hover will not be visible in touch screen.
Parameter of Tooltip
Fig 4.11.1 Parameter of Tooltip

4.11.2 Behaviour

  • Tooltip will be always in the container. If the element on which tooltip appear, is at the very bottom on the panel, tooltip will open at the topside of the element, if the element at the right side, it will open at the left side of the element as shown in image below.
Tooltip Behaviour
Fig 4.11.2 Parameter of Tooltip

4.11.3 Usage

Whenever it requires to show the information attached with any actions/label, tooltip can be used. I.e in icons based action to explain the what icon is stands for tooltip can be used.