Tip Manager

deprecated in v2.9Refer to the Carousel component documentation.
Learn more

Overview

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<calcite-tip-manager>
    <calcite-tip-group group-title="Tip Manager heading">
        <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>
        <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>
    </calcite-tip-group>
    <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>
    <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>
</calcite-tip-manager>
v3.0.3

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

Properties

PropertyAttributeDescriptionTypeDefault
closedclosedWhen true, does not display or position the component.booleanfalse
headingLevelheading-levelSpecifies the heading level of the component's heading for proper document structure, without affecting visual styling.1 | 2 | 3 | 4 | 5 | 6
messageOverridesUse this property to override individual strings used by the component.{ defaultGroupTitle?: string; defaultPaginationLabel?: string; close?: string; previous?: string; next?: string; }

Slots

NameDescription
default (unnamed)A slot for adding calcite-tips.

Styles

NameDescription
--calcite-tip-manager-heightThe maximum height of the component.
--calcite-tip-max-widthThe maximum width of a slotted calcite-tip within the component.

Events

NameDescriptionBehavior
calciteTipManagerCloseEmits when the component has been closed.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
nextTipSelects the next calcite-tip to display.nextTip(): Promise<void>
previousTipSelects the previous calcite-tip to display.previousTip(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close