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
<calcite-tip-manager>
<calcite-tip-group group-title="Tip Manager heading">
<calcite-tip heading="Example tip title">
<img slot="thumbnail" src="https://placebear.com/1000/600" alt="A bear in its natural habitat.">
<p>Description lorem ipsum dolor sit amet quis nostrud exercitation consectetur adipiscing elit.</p>
<calcite-link href="http://www.esri.com">An example link</calcite-link>
</calcite-tip>
<calcite-tip heading="Example tip title">
<img slot="thumbnail" src="https://placebear.com/1000/600" alt="A bear in its natural habitat.">
<p>Description lorem ipsum dolor sit amet quis nostrud exercitation consectetur adipiscing elit.</p>
<calcite-link href="http://www.esri.com">An example link</calcite-link>
</calcite-tip>
</calcite-tip-group>
<calcite-tip heading="Example tip title">
<img slot="thumbnail" src="https://placebear.com/1000/600" alt="A bear in its natural habitat.">
<p>Description lorem ipsum dolor sit amet quis nostrud exercitation consectetur adipiscing elit.</p>
<calcite-link href="http://www.esri.com">An example link</calcite-link>
</calcite-tip>
<calcite-tip heading="Example tip title">
<img slot="thumbnail" src="https://placebear.com/1000/600" alt="A bear in its natural habitat.">
<p>Description lorem ipsum dolor sit amet quis nostrud exercitation consectetur adipiscing elit.</p>
<calcite-link href="http://www.esri.com">An example link</calcite-link>
</calcite-tip>
</calcite-tip-manager>
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 true , 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. | {
defaultGroupTitle?: string;
defaultPaginationLabel?: string;
close?: string;
previous?: string;
next?: string;
} |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-tip s. |
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> |