logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.12.1
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Non-modal
Placement
Custom mask style
Custom indicator
API
Tour
TourStep
Design Token

Tour

  • TooltipTree

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    A popup component for guiding users through a product. Available since 5.0.0.

    When To Use

    Use when you want to guide users through a product.

    Examples

    API

    Common props ref:Common props

    Tour

    PropertyDescriptionTypeDefaultVersion
    arrowWhether to show the arrow, including the configuration whether to point to the center of the elementboolean|{ pointAtCenter: boolean}true
    closeIconCustomize close iconReact.ReactNodetrue5.9.0
    placementPosition of the guide card relative to the target elementcenter left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
    onCloseCallback function on shutdownFunction-
    maskWhether to enable masking, change mask style and fill color by pass custom propsboolean | { style?: React.CSSProperties; color?: string; }true
    typeType, affects the background color and text colordefault primarydefault
    openOpen tourboolean-
    onChangeCallback when the step changes. Current is the previous step(current: number) => void-
    currentWhat is the current stepnumber-
    scrollIntoViewOptionssupport pass custom scrollIntoView optionsboolean | ScrollIntoViewOptionstrue5.2.0
    indicatorsRendercustom indicator(current: number, total: number) => ReactNode-5.2.0
    zIndexTour's zIndexnumber10015.3.0
    getPopupContainerSet the rendering node of Tour floating layer(node: HTMLElement) => HTMLElementbody5.12.0

    TourStep

    PropertyDescriptionTypeDefaultVersion
    targetGet the element the guide card points to. Empty makes it show in center of screen() => HTMLElement HTMLElement-
    arrowWhether to show the arrow, including the configuration whether to point to the center of the elementboolean { pointAtCenter: boolean}true
    closeIconCustomize close iconReact.ReactNodetrue5.9.0
    coverDisplayed pictures or videosReactNode-
    titletitleReactNode-
    descriptiondescriptionReactNode-
    placementPosition of the guide card relative to the target elementcenter left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
    onCloseCallback function on shutdownFunction-
    maskWhether to enable masking, change mask style and fill color by pass custom props, the default follows the mask property of Tourboolean | { style?: React.CSSProperties; color?: string; }true
    typeType, affects the background color and text colordefault primarydefault
    nextButtonPropsProperties of the Next button{ children: ReactNode; onClick: Function }-
    prevButtonPropsProperties of the previous button{ children: ReactNode; onClick: Function }-
    scrollIntoViewOptionssupport pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tourboolean | ScrollIntoViewOptionstrue5.2.0

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    closeBtnSizeClose button sizenumber22
    primaryNextBtnHoverBgHover background color of next button in primary typestringrgb(240, 240, 240)
    primaryPrevBtnBgBackground color of previous button in primary typestringrgba(255, 255, 255, 0.15)
    zIndexPopupTour popup z-indexnumber1070

    Global TokenHow to use?

    Basic

    The most basic usage.

    expand codeexpand code
    Placement

    Change the placement of the guide relative to the target, there are 12 placements available. When target={null} the guide will show in the center.

    expand codeexpand code
    Custom indicator

    Custom indicator.

    expand codeexpand code
    Non-modal

    Use mask={false} to make Tour non-modal. At the meantime it is recommended to use with type="primary" to emphasize the guide itself.

    expand codeexpand code
    Custom mask style

    Custom mask style.

    expand codeexpand code