Tooltips

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