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
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. | Record<string, unknown> | ||
| 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> |