Annotation context

Preview

Basic

Content with tutorial annotations enabled.
Tutorial flow

Usage

<cs-annotation-context>
  <!-- Child components can display tutorial annotations -->
  <cs-app-layout>
    <div slot="content">
      <cs-container header="Getting started">
        <cs-hotspot></cs-hotspot>
        Annotated content here.
      </cs-container>
    </div>
  </cs-app-layout>
</cs-annotation-context>

Properties

current-tutorialAnnotationContextProps.Tutorial | nullrequired

The currently launched tutorial. This should be the object received in the detail property of the onStartTutorial event.

i18n-stringsAnnotationContextProps.I18nStringsrequired

An object containing all the necessary localized strings required by the component. The object should contain:

  • finishButtonText - Specifies the text that's displayed in the finish button.
  • labelDismissAnnotation - Specifies the aria-label for the dismiss button.
  • labelHotspot - Specifies the aria-label for the hotspot button. The openState argument is deprecated, it's handled by the hotspot button aria-expanded attribute.
  • nextButtonText - Specifies the text that's displayed in the next button.
  • previousButtonText - Specifies the text that's displayed in the previous button.
  • stepCounterText - Specifies the step counter text that's displayed in the annotation popover.
  • taskTitle - Specifies the title text that's displayed in the annotation popover.

Slots

default

Put all page content inside this component's children. This component will provide a context which is used by the Hotspot elements throughout the page.

Events

exitTutorialCustomEvent<TutorialPanelProps.TutorialDetail>

Fired when the user exits the current tutorial.

finishCustomEvent<void>

Fired when the user clicks the "Finish" button on the last step of the tutorial.

startTutorialCustomEvent<TutorialPanelProps.TutorialDetail>

Fired when the user selects a tutorial from the list.

stepChangeCustomEvent<AnnotationContextProps.StepChangeDetail>

This event is fired when a user clicks the "Next" or "Previous" button on a popover, when the user clicks on a closed hotspot icon, or when the AnnotationOverlay determines that the current hotspot has disappeared from the page and a different one should be selected (e.g. when navigating between pages).

Use the reason property of the event detail to determine why this event was fired.