logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.9.4
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
基本
位置
箭头展示
贴边偏移
多彩文字提示
API
共同的 API
主题变量（Design Token）
FAQ
为何有时候 HOC 组件无法生效？
placement 的行为逻辑是什么？

Tooltip
文字提示

    • Timeline时间轴Tour漫游式引导

    相关资源

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

    简单的文字提示气泡框。

    何时使用

    鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

    可用来代替系统默认的 title 提示，提供一个 按钮/文字/操作 的文案解释。

    代码演示

    Tooltip will show on mouse enter.
    基本

    最简单的用法。

    expand codeexpand code
    Content
    箭头展示

    支持显示、隐藏以及将箭头保持居中定位。

    expand codeexpand code
    Presets
    Custom
    多彩文字提示

    我们添加了多种预设色彩的文字提示样式，用作不同场景使用。

    expand codeexpand code
    位置

    位置有 12 个方向。

    expand codeexpand code
    贴边偏移

    当 Tooltip 贴边时，自动偏移并且调整箭头位置。当超出过多时，则一同滚出屏幕。

    expand codeexpand code

    API

    通用属性参考：通用属性

    参数说明类型默认值
    title提示文字ReactNode | () => ReactNode-

    共同的 API

    以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

    参数说明类型默认值版本
    align该值将合并到 placement 的配置中，设置参考 rc-tooltipobject-
    arrow修改箭头的显示状态以及修改箭头是否指向目标元素中心boolean | { pointAtCenter: boolean }true5.2.0
    autoAdjustOverflow气泡被遮挡时自动调整位置booleantrue
    color背景颜色string-4.3.0
    defaultOpen默认是否显隐booleanfalse4.23.0
    destroyTooltipOnHide关闭后是否销毁 Tooltipbooleanfalse
    getPopupContainer浮层渲染父节点，默认渲染到 body 上(triggerNode: HTMLElement) => HTMLElement() => document.body
    mouseEnterDelay鼠标移入后延时多少才显示 Tooltip，单位：秒number0.1
    mouseLeaveDelay鼠标移出后延时多少才隐藏 Tooltip，单位：秒number0.1
    overlayClassName卡片类名string-
    overlayStyle卡片样式object-
    overlayInnerStyle卡片内容区域的样式对象object-
    placement气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
    trigger触发行为，可选 hover | focus | click | contextMenu，可使用数组设置多个触发行为string | string[]hover
    open用于手动控制浮层显隐，小于 4.23.0 使用 visible（为什么?）booleanfalse4.23.0
    zIndex设置 Tooltip 的 z-indexnumber-
    onOpenChange显示隐藏的回调(open: boolean) => void-4.23.0

    主题变量（Design Token）

    组件 Token如何定制？

    Token 名称描述类型默认值
    zIndexPopup文字提示 z-indexnumber1070

    全局 Token如何定制？

    FAQ

    为何有时候 HOC 组件无法生效？

    请确保 Tooltip 的子元素能接受 onMouseEnter、onMouseLeave、onPointerEnter、onPointerLeave、onFocus、onClick 事件。

    placement 的行为逻辑是什么？

    当屏幕空间足够时，会按照 placement 的设置进行弹层。当空间不足时则会取反向位置进行弹层（例如 top 不够时，会改为 bottom，topLeft 不够时会改为 bottomLeft）。单一方向如 top bottom left right 当贴边时进行自动位移：

    shift

    当设置为边缘对齐方向如 topLeft bottomRight 等，则会仅做翻转而不做位移。