Tip Manager

Calcite Tip Manager provides a paginated container for Calcite Tip components.

Overview

Built with Calcite Tips, Tip Manager is intended to be used for in-app, short-form documentation. Use Tip Manager 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

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
Arrow downScroll down content area
Arrow upScroll up content area

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
closedclosed

Closed state of the `calcite-tip-manager`.

booleanA boolean property should be present, or not
truefalse
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
intlDefaultTitleintl-default-title

The default group title for the `calcite-tip-manager`.

optional
stringA custom string
undefined
intlNextintl-next

Alternate text for navigating to the next tip.

optional
stringA custom string
undefined
intlPaginationLabelintl-pagination-label

Label that appears on hover of pagination icon.

optional
stringA custom string
undefined
intlPreviousintl-previous

Alternate text for navigating to the previous tip.

optional
stringA custom string
undefined

Events

NameDescriptionDetail
calciteTipManagerClose

Emitted when the `calcite-tip-manager` has been closed.

bubblescomposedcancelable
any
calciteTipManagerToggle
deprecateduse calciteTipManagerClose instead.

Emitted when the `calcite-tip-manager` has been toggled open or closed.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
nextTip

Selects the next tip to display

nextTip() => Promise<void>Promise<void>
previousTip

Selects the previous tip to display

previousTip() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-tip`s.

Styles

NameDescriptionCSS Variable
--calcite-tip-manager-height

the maximum height of the tip-manager

--calcite-tip-manager-height
--calcite-tip-max-width

the maximum width of a slotted tip within tip-manager

--calcite-tip-max-width

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