Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Hint

The Hint provides a short introductory information about a feature of the user interface.

Its main element is the message container for the explanatory text. The module has a button to dismiss or acknowledge the information. A stem and a pointer connects it with the related interface element. The position and length of the stem can be modified. There is a subtle animation when the hint appears, to draw learner’s attention to the information it’s communicating.

You can always see your courses by clicking on this icon.

%div{style: "padding-bottom: 190px"}
  %a.a-steps-logo{href: enrolments_path, title: "Your courses"}
  .m-hint.m-hint--floating.m-hint--for-navblock-icon.js-hint
    %p
      = your_courses_navigation_hint_text
    %button.a-button.a-button--ghost
      OK

Tooltip variant

The tooltip variant is used when the hint is always available. For example it is used in cloze quizzes to provide a hint about a possible answer.