1. Display without 'i' icon.
Upon hover over the user interface element; display the Tool Tip on the right or left of the element depending on the consideration of available space and the relative placement of other elements. Tip should be brief, it is not necessary to use complete sentences.
2. Display with 'i' icon.
On hover over the 'i' icon; display the Tool Tip to the right or left of the element.
On mouse over Tool Tip disappears.
3. Links within Tool Tip box are for KB links only.
Display all links in blue text.
Display Tool Tip on hover. Do not embed important or transactional links in Tool Tip, e.g., download link to a binary.
4. Specific word or label help text.
If more suitable, supporting information is needed than a few words in the Tool Tip box, underline the word and provde additional explanation upon hover.
Why Use This Pattern
Tool Tip allows for embedding useful hints of information. Tips are a single word, or sentence fragment that provides guidance, direction, or important information.
What is the Solution
A Tool Tip is a small pop-up window that reveals more information about the user interface element it is referencing. The Tool Tip can be used with or without “i” icon, with brief content; usually using a few specific words.
When to Use This Pattern
Use Tool Tip to explain more about the purpose of an interaction, an icon, control or field.
Do Not Use This Pattern
For providing lengthy instructions as it may be distracting.