跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

TooltipAPI

React Tooltip 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Tooltip from '@mui/joy/Tooltip';
// or
import { Tooltip } from '@mui/joy';

阅读本指南，了解有关最小化 bundle 大小的差异。

Props

名称类型默认值描述
children*element-

Tooltip 引用元素。

arrowboolfalse

如果为 true，则向 tooltip 添加箭头。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'		'neutral'

组件的颜色。它支持适用于此组件的那些主题颜色。

要了解如何添加自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

describeChildboolfalse

如果 title 用作可访问的描述，则设置为 true。默认情况下，title 用作子项的可访问标签。

direction'ltr'
| 'rtl'		'ltr'

文本方向。

disableFocusListenerboolfalse

不响应 focus-visible 事件。

disableHoverListenerboolfalse

不响应 hover 事件。

disableInteractiveboolfalse

使 tooltip 不可交互，即当用户在 leaveDelay 过期之前悬停在 tooltip 上时，它将关闭。

disablePortalboolfalse

children 将位于父组件的 DOM 层次结构下。

disableTouchListenerboolfalse

不响应长按触摸事件。

enterDelaynumber100

显示 tooltip 之前等待的毫秒数。此 prop 不会影响进入触摸延迟 (enterTouchDelay)。

enterNextDelaynumber0

当最近已打开一个 tooltip 时，显示 tooltip 之前等待的毫秒数。

enterTouchDelaynumber700

用户必须触摸元素多少毫秒才能显示 tooltip。

followCursorboolfalse

如果为 true，则 tooltip 跟随光标在包裹的元素上移动。

idstring-

此 prop 用于帮助实现可访问性逻辑。如果您不提供此 prop。它将回退到随机生成的 id。

keepMountedboolfalse

始终将 children 保留在 DOM 中。当您希望最大化 Popper 的响应能力时，此 prop 在 SEO 情况下可能很有用。

leaveDelaynumber0

隐藏 tooltip 之前等待的毫秒数。此 prop 不会影响离开触摸延迟 (leaveTouchDelay)。

leaveTouchDelaynumber1500

用户停止触摸元素后多少毫秒隐藏 tooltip。

modifiersArray<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>		-

Popper.js 基于“插件式”架构，其大多数功能都完全封装在“modifiers”中。
modifier 是一个函数，每次 Popper.js 需要计算 popper 的位置时都会调用它。因此，modifier 应该非常高效，以避免瓶颈。要了解如何创建 modifier，请阅读 modifiers 文档。

onClosefunc-

当组件请求关闭时触发的回调。

签名：function(event: React.SyntheticEvent) => void
  • event 回调的事件源。
onOpenfunc-

当组件请求打开时触发的回调。

签名：function(event: React.SyntheticEvent) => void
  • event 回调的事件源。
openbool-

如果为 true，则显示组件。

placement'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'		'bottom'

Tooltip 位置。

size'sm'
| 'md'
| 'lg'		'md'

组件的大小。

要了解如何向组件添加自定义大小，请查看主题组件—扩展大小。

slotProps{ arrow?: func
| object, root?: func
| object }		{}

用于每个 slot 内部的 props。

slots{ arrow?: elementType, root?: elementType }{}

用于每个 slot 内部的组件。

有关更多详细信息，请参阅下面的 Slots API。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

titlenode-

Tooltip 标题。零长度标题字符串、undefined、null 和 false 永远不会显示。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'		'solid'

要使用的全局 variant。

要了解如何添加自己的 variant，请查看主题组件—扩展 variant。

ref 被转发到根元素。

主题默认 props

您可以使用 JoyTooltip 通过主题更改此组件的默认 props。

Slots

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称类名默认组件描述
root.MuiTooltip-root'div'呈现根的组件。
arrow.MuiTooltip-arrow'span'呈现箭头的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的 slot。

类名规则名称描述
.MuiTooltip-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiTooltip-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiTooltip-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiTooltip-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiTooltip-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiTooltip-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiTooltip-placementBottomplacementBottom如果 placement 包含 “bottom”，则应用于根元素的类名。
.MuiTooltip-placementLeftplacementLeft如果 placement 包含 “left”，则应用于根元素的类名。
.MuiTooltip-placementRightplacementRight如果 placement 包含 “right”，则应用于根元素的类名。
.MuiTooltip-placementTopplacementTop如果 placement 包含 “top”，则应用于根元素的类名。
.MuiTooltip-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiTooltip-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiTooltip-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiTooltip-tooltipArrowtooltipArrow如果 arrow={true}，则应用于根元素的类名。
.MuiTooltip-touchtouch如果 tooltip 通过触摸打开，则应用于根元素的类名。
.MuiTooltip-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiTooltip-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiTooltip-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiTooltip-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

  • 使用全局类名。
  • 在自定义主题中，使用规则名称作为组件的 styleOverrides 属性的一部分。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。