Tip
Calcite Tip provides a way to display short help articles with an optional image and link.
Overview
Calcite 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 Calcite Tip Manager for a paginated series of content.
Consider Notice for inline helpers or hints.
For hover-generated helpers, see 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 | Values |
---|---|---|---|---|
dismissed | dismissed | No longer displays the tip. | true false | |
heading | heading | The heading of the tip. | undefined | |
headingLevel | heading-level | Number at which section headings should start for this component. | 1 2 3 4 5 6 | |
intlClose | intl-close | Alternate text for closing the tip. | undefined | |
nonDismissible | non-dismissible | Indicates whether the tip can be dismissed. | true false | |
selected | selected | The selected state of the tip if it is being used inside a `calcite-tip-manager`. | true false |
Events
Name | Description | Detail |
---|---|---|
calciteTipDismiss | Emitted when the component has been dismissed. | any |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text and a hyperlink. |
thumbnail | A slot for adding an HTML image element to the tip. |
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
groupTitle | group-title | The title used for all nested tips. | undefined |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding `calcite-tip`s. |