TooltipAPI
React Tooltip 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
导入
import Tooltip from '@mui/material/Tooltip';
// or
import { Tooltip } from '@mui/material';通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。
原生组件的 Props 也可用。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children* | element | - | Tooltip 参考元素。 |
| arrow | bool | false | 如果 |
| classes | object | - | 覆盖或扩展应用于组件的样式。 有关更多详细信息，请参阅下方的 CSS 类 API。 |
| components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | 用于每个内部插槽的组件。 |
| componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | 插槽组件的额外 props。您可以覆盖现有 props 或添加新的 props。 |
| describeChild | bool | false | 如果 |
| disableFocusListener | bool | false | 不响应 focus-visible 事件。 |
| disableHoverListener | bool | false | 不响应 hover 事件。 |
| disableInteractive | bool | false | 使 tooltip 不可交互，即当用户在 |
| disableTouchListener | bool | false | 不响应长按触摸事件。 |
| enterDelay | number | 100 | 显示 tooltip 之前等待的毫秒数。此 prop 不会影响 enter touch delay ( |
| enterNextDelay | number | 0 | 当最近已打开一个 tooltip 时，显示 tooltip 之前等待的毫秒数。 |
| enterTouchDelay | number | 700 | 用户必须触摸元素多少毫秒后才显示 tooltip。 |
| followCursor | bool | false | 如果 |
| id | string | - | 此 prop 用于帮助实现可访问性逻辑。如果您不提供此 prop。它会回退到随机生成的 id。 |
| leaveDelay | number | 0 | 隐藏 tooltip 之前等待的毫秒数。此 prop 不会影响 leave touch delay ( |
| leaveTouchDelay | number | 1500 | 用户停止触摸元素后多少毫秒才隐藏 tooltip。 |
| onClose | func | - | 当组件请求关闭时触发的回调。 签名： function(event: React.SyntheticEvent) => void
|
| onOpen | func | - | 当组件请求打开时触发的回调。 签名： function(event: React.SyntheticEvent) => void
|
| open | bool | - | 如果 |
| placement | 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | Tooltip 位置。 |
| PopperComponent | elementType | - | 用于 popper 的组件。 |
| PopperProps | object | {} | 应用于 |
| slotProps | { arrow?: func | object, popper?: func | object, tooltip?: func | object, transition?: func | object } | {} | 用于每个内部插槽的 props。 |
| slots | { arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType } | {} | 用于每个内部插槽的组件。 |
| sx | Array<func | object | bool> | func | object | - | 允许定义系统覆盖以及其他 CSS 样式的系统 prop。 有关更多详细信息，请参阅 `sx` 页面。 |
| title | node | - | Tooltip 标题。永远不会显示零长度标题字符串、undefined、null 和 false。 |
| TransitionComponent | elementType | - | 用于 transition 的组件。请遵循本指南以了解有关此组件要求的更多信息。 |
| TransitionProps | object | {} | 应用于 transition 元素的 Props。默认情况下，该元素基于此 |
ref 被转发到根元素。主题默认 props
您可以使用 MuiTooltip 通过主题更改此组件的默认 props。
| 插槽名称 | 类名 | 默认组件 | 描述 |
|---|---|---|---|
| popper | .MuiTooltip-popper | Popper | 用于 popper 的组件。 |
| transition | Grow | 用于 transition 的组件。请遵循本指南以了解有关此组件要求的更多信息。 | |
| tooltip | .MuiTooltip-tooltip | 用于 tooltip 的组件。 | |
| arrow | .MuiTooltip-arrow | 用于箭头的组件。 |
这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。
| 类名 | 规则名称 | 描述 |
|---|---|---|
| .MuiTooltip-popperArrow | popperArrow | 如果 arrow={true}，则应用于 Popper 组件的样式。 |
| .MuiTooltip-popperClose | popperClose | 除非 tooltip 打开，否则应用于 Popper 组件的样式。 |
| .MuiTooltip-popperInteractive | popperInteractive | 除非 disableInteractive={true}，否则应用于 Popper 组件的样式。 |
| .MuiTooltip-tooltipArrow | tooltipArrow | 如果 arrow={true}，则应用于 tooltip（标签包装器）元素的样式。 |
| .MuiTooltip-tooltipPlacementBottom | tooltipPlacementBottom | 如果 placement 包含 "bottom"，则应用于 tooltip（标签包装器）元素的样式。 |
| .MuiTooltip-tooltipPlacementLeft | tooltipPlacementLeft | 如果 placement 包含 "left"，则应用于 tooltip（标签包装器）元素的样式。 |
| .MuiTooltip-tooltipPlacementRight | tooltipPlacementRight | 如果 placement 包含 "right"，则应用于 tooltip（标签包装器）元素的样式。 |
| .MuiTooltip-tooltipPlacementTop | tooltipPlacementTop | 如果 placement 包含 "top"，则应用于 tooltip（标签包装器）元素的样式。 |
| .MuiTooltip-touch | touch | 如果 tooltip 通过触摸打开，则应用于 tooltip（标签包装器）元素的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 在自定义主题中，将规则名称作为组件的
styleOverrides属性的一部分。
源代码
如果您在本页中找不到信息，请考虑查看组件的实现以获取更多详细信息。