Overview
Tip is a simple solution for short content that can be supported with an image. Tips can be dismissible or non-dismissible. Tip is optimized to work with Tip Manager and Tip Group for a paginated series of content.
Consider Notice for inline helpers or hints.
For hover-generated helpers, please consider Tooltip.
Usage
- Provide high-level onboarding that does not need to be inline.
Sample
<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>
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 |
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
closed | closed | When true , the component does not display. | boolean | false |
closeDisabled | close-disabled | When true , the close button is not present on the component. | boolean | false |
heading | heading | The component header text. | string | |
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. | { close?: string; } | ||
selected | selected | When true , the component is selected if it has a parent calcite-tip-manager .
Only one tip can be selected within the calcite-tip-manager parent. | boolean | false |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text and a hyperlink. |
thumbnail | A slot for adding an HTML image element. |
Events
Name | Description | Behavior |
---|---|---|
calciteTipDismiss | 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> |