Tour Item
<quiet-tour-item>
Represents a single step inside a tour, pointing at the element to highlight and providing the content shown beside it.
This component must only be used within a tour. You can see some examples of tour items being used in the tour documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-tour-item> from the CDN, use the following code.
import 'https://cdn.quietui.org/v5.3.1/components/tour-item/tour-item.js';
To manually import <quiet-tour-item> from a self-hosted distribution, use the
following code. Remember to replace /path/to/quiet with the appropriate local path.
import '/path/to/quiet/components/tour-item/tour-item.js';Slots Jump to heading
Tour Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The step's content, typically a short heading and a description of the feature being highlighted. |
actions
|
One or more buttons used to navigate the tour, e.g.
<button data-tour="next">. Use
data-tour="previous", data-tour="next", and
data-tour="stop" to control the tour from here.
|
Properties Jump to heading
Tour Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property | Description | Reflects | Type | Default |
|---|---|---|---|---|
for
|
The id of the element to highlight for this step. The element must be in the same
document as the tour.
|
|
string
|
|
label
|
A custom accessible name for the step, announced by screen readers when the popover appears. When omitted, the step's first heading is used instead. |
|
string
|
|
placement
|
The placement of the step's popover in reference to the highlighted element. The popover will shift to a more optimal location if the preferred placement doesn't have enough room. |
|
'top' |
'top-start' |
'top-end' |
'bottom' |
'bottom-start' |
'bottom-end' |
'right' |
'right-start' |
'right-end' |
'left' |
'left-start' |
'left-end' |
undefined
|
|
name
|
An optional name for the step. Use it with the tour's active-name property and
goTo() method.
|
|
string
|
CSS parts Jump to heading
Tour Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
body |
The container that wraps the default slot. |
::part(body)
|
actions |
The container that wraps the actions slot. A flex container, by default. |
::part(actions)
|
step-counter |
The "Step X of Y" counter shown alongside the actions when the tour has
with-steps.
|
::part(step-counter)
|