Links
There may be 2 types of links:
1. Hyperlinks, that take you to pages that are outside the website
2. Internal Links that may redirect you to other pages within the website.
For the user to be able to intuitively click on them or understand that they are clickable, they are both visualized as underlined text, which is the most common way of representing links.
Sometimes these links are stand alone text and sometimes they're a part of sentences. Either way, links should not include full-stops and the language used/ phrasing should be such that the user is able to understand where they would be redirected to or where they should expect to land by clicking on the link.
Default
Normal LinksHover
Normal LinksFocus
Normal LinksDownstate
Normal LinksDisabled
Normal LinksDefault
Normal LinksHover
Normal LinksFocus
Normal LinksDownstate
Normal LinksDisabled
Normal LinksVisual Example
Code Usage
Tooltips
Tooltips are also types of links and are used to display extra information to the user. These may include the tooltip links or the information icon. The Tooltip links and icons can be visually represented as shown below in various states:
Tooltip Links
Default
TooltipHover
TooltipFocus
TooltipDownstate
TooltipDisabled
TooltipVisual Example
Tooltip Title
Tooltip Title
Code Usage
large Tooltip
TooltipTooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Small Tooltip
TooltipTooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Tooltip - Display Variants
The tooltip bubble can be customized to appear in different directions based on the requirement and position of the tooltip. These are made for 4 directions, namely: top, bottom, left and right.
Tooltip - Display Variants | Large
Left Tooltip
Tooltip Title
Right Tooltip
Tooltip Title
Top Tooltip
Tooltip Title
Bottom Tooltip
Tooltip Title
Code Usage
Left Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Right Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Top Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Bottom Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Tooltip - Display Variants | Small
Left Tooltip
Tooltip Title
Right Tooltip
Tooltip Title
Top Tooltip
Tooltip Title
Bottom Tooltip
Tooltip Title
Code Usage
Left Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Right Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Top Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
Bottom Tooltip
Tooltip Title
There's something about witnessing something in the sky that makes people think they're seeing something unique or special. I don't really understand the psychology of it, to be honest.
The maximum width of a tooltip shall not exceed beyond what may be required to accommodate at most 10 characters in a line and should not be shorter than the width required to accommodate at least 3 characters in a line.
While on the desktop tooltips can be accessed by clicking the link, on tablets and mobiles the user will be required to tap/ click them to access the tooltip. The user may dismiss the tip on these devices by tapping or clicking on the close icon. On the desktop the user may also be able to use the Esc key for the same.
Adjust Arrow Position
Developers Note
The arrow position can be customized using the custom parameters using the transform, translate and position properties in CSS. Developers will still have to implement triggers and actions for these tooltips to be correctly used.
Tooltip Icons
These can be of two sizes depending on the size of Text. For 16px text size, the corresponding icon will be of the size 16px X 16px, while for 14px text height, 12px X 12px icon can be used.
Visual Example
Usage of Icon
Tooltips in the form of icons must always be used after the text copy for which the tooltip information is provided. This prompts the user to click on it. When the icons are placed before the text copy, they can be perceived as static elements and can cause the user to not interact with them. They can miss important information.
The tooltips/links can alternatively trigger a modal to open. Modals are used when the type of information/ the amount of content is more detailed and extensive.
Accessibility
The colors & typography for each state follow the accessibility standards for AA compliance.
Additionally the language or the words used as links should enable the user to understand where they will be directed to, or what information it would lead to.