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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next item within element. If the current focus is the last item, the focus will cycle to the first item
Tab and ShiftMove focus to previous item within element. If the current focus is the first item, the focus will cycle to the last item

API reference

calcite-tip
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
dismisseddismissed

No longer displays the tip.

booleanA boolean property should be present, or not
truefalse
headingheading

The heading of the tip.

optional
stringA custom string
undefined
headingLevelheading-level

Number at which section headings should start for this component.

typedChoose from a set of typed values
123456
intlCloseintl-close

Alternate text for closing the tip.

optional
stringA custom string
undefined
nonDismissiblenon-dismissible

Indicates whether the tip can be dismissed.

booleanA boolean property should be present, or not
truefalse
selectedselected

The selected state of the tip if it is being used inside a `calcite-tip-manager`.

booleanA boolean property should be present, or not
truefalse

Events

NameDescriptionDetail
calciteTipDismiss

Emitted when the component has been dismissed.

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding text and a hyperlink.

thumbnail

A slot for adding an HTML image element to the tip.

calcite-tip-group
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
groupTitlegroup-title

The title used for all nested tips.

optional
stringA custom string
undefined

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-tip`s.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.