A tooltip is a message box that is shown when a UI element, like a button or an icon, is in a hover state. They contain short descriptions that offer additional information to help users better understand elements within a UI.
When writing tooltips, follow these general recommendations:
Don't | Do |
|---|---|
Don't repeat information that is already available in the UI. | Do write content that is succinct, clear, and effective. |
Don't use tooltips for critical information. | Do use tooltips for additional, non-essential information. |
Don't end sentence fragments in a period. | Do end full sentences in a period. |
Don’t place tooltips on question-circle icons (). Instead, use a popover. | Do follow our tooltip development accessibility guidelines to ensure that tooltip content is available to all users. |
You can find additional guidance in the tooltip design guidelines.
Icon tooltips
Icons allow you to save space in a UI and provide users with another recognition method.
It's often important to place tooltips on icons, especially when they aren't accompanied by a text label. This helps ensure that your users can hover over an icon to understand the action that it is linked to. When you use a tooltip with an icon, limit the content to 1 or 2 words that identify the icon accurately and clearly.
For example:
In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table:
Icon | Name | Tooltip content | Note |
|---|---|---|---|
fa-arrow-circle-up | Upgrade | ||
fa-bell | Notifications | ||
fa-cog | Settings | ||
fa-copy | Copy | ||
fa-download | Download | ||
fa-ellipsis-v | More options | ||
fa-pencil-alt | Edit | ||
fa-search | Search | ||
fa-search-minus | Search minus | ||
fa-search-plus | Search plus | ||
fa-sync-alt | Sync, Refresh, or Running | Choose the best fit for your scenario. | |
fa-trash | Delete | ||
pficon-export | Export | ||
pficon-task | Tasks |
You can learn more about the usage of these icons in our design foundations.
View source on GitHub
