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-mark 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 | React name | Tooltip content | Note |
|---|---|---|---|---|
| rh-ui-arrow-circle-up | RhUiArrowCircleUpIcon | Upgrade | ||
| rh-ui-notification-fill | RhUiNotificationFillIcon | Notifications | ||
| rh-ui-settings | RhUiSettingsIcon | Settings | ||
| rh-ui-copy | RhUiCopyIcon | Copy | ||
| rh-ui-download | RhUiDownloadIcon | Download | ||
| rh-ui-ellipsis-vertical | RhUiEllipsisVerticalIcon | More options | ||
| rh-ui-edit | RhUiEditIcon | Edit | ||
| rh-ui-search | RhUiSearchIcon | Search | ||
| rh-ui-zoom-out | RhUiZoomOutIcon | Zoom out | ||
| rh-ui-zoom-in | RhUiZoomInIcon | Zoom in | ||
| rh-ui-sync | RhUiSyncIcon | Sync | Choose the best fit for your scenario. | |
| rh-ui-trash | RhUiTrashIcon | Delete | ||
| rh-ui-export | RhUiExportIcon | Export | ||
| rh-ui-task | RhUiTaskIcon | Tasks |
You can learn more about the usage of these icons in our design foundations.
