Overview
Built with Tips, Tip Manager is intended to be used for in-app, short-form documentation. Use Tip Manager and Tip Group when inline help or documentation may be too rich for a given space.
Consider Notice for inline helpers or hints.
Usage
- Provide app-level access to onboarding material
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Move focus to next item within element. If the current focus is the last item, the focus will cycle to the first item |
Tab and Shift | Move focus to previous item within element. If the current focus is the first item, the focus will cycle to the last item |
Arrow down | Scroll down content area |
Arrow up | Scroll up content area |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| closed | closed | When present, does not display or position the component. | boolean | false |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-tips. |
Styles
| Name | Description |
|---|---|
| --calcite-tip-manager-height | The maximum height of the component. |
| --calcite-tip-max-width | The maximum width of a slotted calcite-tip within the component. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteTipManagerClose | Emits when the component has been closed. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| nextTip | Selects the next calcite-tip to display. | nextTip(): Promise<void> |
| previousTip | Selects the previous calcite-tip to display. | previousTip(): Promise<void> |