Website Tooltips Explained: Helpful Hints Without Hidden Instructions

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Keep essential guidance visible

   0:18

   A hidden hint should not be the only route to critical task instructions.

   On-screen labels: Essential instructions; Visible guidance; Supplementary hint.

2. 2

   Step 2: Support more than mouse hover

   0:30

   Check whether keyboard users can reveal the same useful information.

   On-screen labels: Pointer hover; Keyboard focus; Equivalent information.

3. 3

   Step 3: Make dismissal possible

   0:42

   The visitor needs a way to dismiss extra content when it obscures the page.

   On-screen labels: Dismiss action; Escape where appropriate; Unobscured content.

4. 4

   Step 4: Let the pointer reach the hint

   0:54

   Hover content should not vanish when someone moves towards it.

   On-screen labels: Pointer movement; Hoverable hint; Readable content.

5. 5

   Step 5: Allow enough reading time

   1:06

   The content should persist while it is needed under the applicable pattern.

   On-screen labels: Readable duration; Focus or hover state; Controlled dismissal.

6. 6

   Step 6: Check touch and small screens

   1:18

   A touch visitor may not have a normal hover interaction.

   On-screen labels: Touch interaction; Alternative access; Usable small-screen task.

Common questions

Go further