Although it’s best to avoid disabled actions,
sometimes they can’t be avoided.
And sometimes seeing them can encourage users to continue a flow.
In such cases, users need to know how they can progress past the disabled state.
A good way to do that is with tooltips.
Keep the text short and focused on the actions users need to take.
Select a flight before continuing.
Enter a valid passport number.
Earn $50 in credits before cashing out.
You can’t currently click this button because you haven’t yet selected a flight.
The passport number you entered didn’t pass our validation checks.
You must have accumulated at least $50 in credits
before you’re able to cash out the credits into your bank account.
Tooltips can contain any kind of content you want.
You can include pictures, lists, and more.
Of course, just because you can do something,
doesn’t mean you should.
Tooltips have little space to show everything and too much at once can be overwhelming.
If you have a lot to say,
consider including a text link to more information
to continue the pattern of progressive disclosure.
Or if you have structured information, consider a modal to present it all.
Hovering over text is a natural user pattern on desktops.
On desktops, users are used to seeing an indication there’s a tooltip
and moving their mouse over it to learn more.
So it’s natural to have the tooltip popup in context.
Users of mobile devices don’t have the same option.
There’s also a lot less space on mobile devices to display tooltips next to text.
So on mobile devices, open tooltips look somewhat like small, black modals at the bottom of the screen.
This clearly distinguishes them from the initial text
while leaving enough context under the overlay.
A close button is automatically included so users can easily get back to their main flow.