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.

%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

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

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.