New E-learning

Tooltip 

A tooltip is a short piece of help text displayed on demand, on hover or when an element receives focus, to provide additional detail without cluttering the slide. It must never contain information essential to understanding the content.

On this page

When to use a tooltip

  1. Clarify the function of an icon or button whose label is necessarily short. 
  2. Provide a glossary definition, a unit, or a reminder of the expected input format. 
  3. Give a brief practical hint about a complex task.

When not to use a tooltip

  1. Never for information essential to understanding or completing an activity: a tooltip is neither always visible nor always reachable. That information must remain as permanent text on the slide. 
  2. Never as the sole means of conveying a quiz instruction or an error message. 
  3. Never for lengthy content: beyond two sentences, use the Modal component or an expandable text block. 
  4. On touch devices, hover does not exist: provide a tap-triggered version or forgo the tooltip.

Point of caution: the native text in Storyline's "Alt text" field is not a tooltip. It does not appear visually and does not substitute for supplementary information intended for all learners. 

On this page

Implementation

  • Create a dedicated layer containing the tooltip text (Slide Layers → New Layer). 
  • On the trigger object: "Show Layer" triggers when the mouse hovers over it and when the object receives focus or is activated; "Hide Layer" when the mouse leaves, on losing focus, and on ESC. 
  • Uncheck "Prevent user from clicking on the base layer": the tooltip must not behave like a modal. 
  • Right-click → "Accessibility…" on the tooltip text: make it visible to accessibility tools and place it in the focus order right after its trigger. 

Linking trigger and content

  • Storyline has no native way to link a layer to its trigger the way an ARIA attribute would. The robust solution is to build the information into the trigger's Alt text, in addition to the visual layer: "Debt-to-income ratio – information: share of income spent on housing". 
  • The tooltip's content must thus be accessible through two paths: visually via the layer, and through screen-reader output via the trigger's Alt text. 
  • Never duplicate information already present as visible text: repetition needlessly lengthens the screen reader output. 

Content

  • Concise message, one to two sentences, directly related to the trigger element. 
  • No interactive element inside the tooltip. 
  • No essential information, no instruction, no error message. 
  • Write without visual references: neither "the icon above" nor "the button on the right".

Trigger

  • The trigger must be identifiable as carrying information: a standardized help icon or a term underlined with a dotted line, paired with explicit Alt text. 
  • Never use an "i" icon without Alt text: it is announced using the object's name in the timeline, which is not compliant. 
  • The same icon must always denote the same behavior throughout the module.

On this page

Keyboard interaction

Any tooltip shown on hover must also appear when it receives keyboard focus. Triggering on hover alone effectively excludes keyboard users. 
The trigger must be a focusable object (button, interactive shape), not plain text that cannot be reached. 
Provide a slight delay before displaying on hover to avoid spurious appearances as the cursor passes over it. 

Tooltip keyboard navigation function table
Key Function
Tab Reach the trigger, which displays the tooltip
ENTER or SPACE Display the tooltip if the chosen model is activation-based
ESC Close the tooltip without leaving the trigger