logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • 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
Placement
Arrow
Auto Shift
Colorful Tooltip
API
Common API
Design Token
FAQ
Why sometime not work on HOC?
What's the placement logic?

Tooltip

    • TimelineTour

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu 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 Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu 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
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    A simple text popup tip.

    When To Use

    • The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
    • To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

    Examples

    Basic

    The simplest usage.

    expand codeexpand code
    Arrow

    Support show, hide or keep arrow in the center.

    expand codeexpand code
    Colorful Tooltip

    We preset a series of colorful Tooltip styles for use in different situations.

    expand codeexpand code
    Placement

    There are 12 placement options available.

    expand codeexpand code
    Auto Shift

    Auto adjust Popup and arrow position when Tooltip is close to the edge of the screen. Will be out of screen when exceed limitation.

    expand codeexpand code

    API

    Common props ref：Common props

    PropertyDescriptionTypeDefault
    titleThe text shown in the tooltipReactNode | () => ReactNode-

    Common API

    The following APIs are shared by Tooltip, Popconfirm, Popover.

    PropertyDescriptionTypeDefaultVersion
    alignThis value will be merged into placement's config, please refer to the settings rc-tooltipobject-
    arrowChange arrow's visible state and change whether the arrow is pointed at the center of target.boolean | { pointAtCenter: boolean }true5.2.0
    autoAdjustOverflowWhether to adjust popup placement automatically when popup is off screenbooleantrue
    colorThe background colorstring-4.3.0
    defaultOpenWhether the floating tooltip card is open by defaultbooleanfalse4.23.0
    destroyTooltipOnHideWhether destroy tooltip when hiddenbooleanfalse
    getPopupContainerThe DOM container of the tip, the default behavior is to create a div element in body(triggerNode: HTMLElement) => HTMLElement() => document.body
    mouseEnterDelayDelay in seconds, before tooltip is shown on mouse enternumber0.1
    mouseLeaveDelayDelay in seconds, before tooltip is hidden on mouse leavenumber0.1
    overlayClassNameClass name of the tooltip cardstring-
    overlayStyleStyle of the tooltip cardobject-
    overlayInnerStyleStyle of the tooltip inner contentobject-
    placementThe position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
    triggerTooltip trigger mode. Could be multiple by passing an arrayhover | focus | click | contextMenu | Array<string>hover
    openWhether the floating tooltip card is open or not. Use visible under 4.23.0 (why?)booleanfalse4.23.0
    zIndexConfig z-index of Tooltipnumber-
    onOpenChangeCallback executed when visibility of the tooltip card is changed(open: boolean) => void-4.23.0

    Design Token

    Component Token

    Global Token

    FAQ

    Why sometime not work on HOC?

    Please ensure that the child node of Tooltip accepts onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onFocus, onClick events.

    What's the placement logic?

    It will follow placement config when screen has enough space. And flip when space is not enough (Such as top to bottom or topLeft to bottomLeft). Single direction such as top bottom left right will auto shift on the view:

    shift

    When placement is set to edge align such as topLeft bottomRight, it will only do flip but not do shift.

    Tooltip will show on mouse enter.
    Content
    Presets
    Custom