Tooltip API
想要学习更多组件属性和 CSS API,可以查阅 React Tooltip 组件的 API 文档。
导入
import Tooltip from '@mui/material/Tooltip';
// 或
import { Tooltip } from '@mui/material';
组件名称
在主题中,名称“MuiTooltip
”可用于提供默认属性(props),或者样式覆盖属性
原生(Native) 组件的属性也是可用的。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
children* | element | Tooltip reference element. ⚠️ Needs to be able to hold a ref. | |
arrow | bool | false | If true , adds an arrow to the tooltip. |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | The components used for each slot inside the Tooltip. Either a string to use a HTML element or a component. |
componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | The props used for each slot inside the Tooltip. Note that componentsProps.popper prop values win over PopperProps and componentsProps.transition prop values win over TransitionProps if both are applied. |
describeChild | bool | false | Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child. |
disableFocusListener | bool | false | Do not respond to focus-visible events. |
disableHoverListener | bool | false | Do not respond to hover events. |
disableInteractive | bool | false | Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the leaveDelay is expired. |
disableTouchListener | bool | false | Do not respond to long press touch events. |
enterDelay | number | 100 | The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay ( enterTouchDelay ). |
enterNextDelay | number | 0 | The number of milliseconds to wait before showing the tooltip when one was already recently opened. |
enterTouchDelay | number | 700 | The number of milliseconds a user must touch the element before showing the tooltip. |
followCursor | bool | false | If true , the tooltip follow the cursor over the wrapped element. |
id | string | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | |
leaveDelay | number | 0 | The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay ( leaveTouchDelay ). |
leaveTouchDelay | number | 1500 | The number of milliseconds after the user stops touching an element before hiding the tooltip. |
onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback. | |
onOpen | func | Callback fired when the component requests to be open. Signature: function(event: object) => void event: The event source of the callback. | |
open | bool | false | Control the popup` open state. |
placement | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | Tooltip placement. |
PopperComponent | elementType | Popper | The component used for the popper. |
PopperProps | object | {} | Props applied to the Popper element. |
slotProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | |
slots | { arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType } | {} | |
sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
title | node | Tooltip title. Zero-length titles string, undefined, null and false are never displayed. | |
TransitionComponent | elementType | Grow | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
TransitionProps | object | Props applied to the transition element. By default, the element is based on this Transition component. |
ref
则会被传递到根元素中。CSS
规则名称 | 全局类名 | 描述 |
---|---|---|
popper | .MuiTooltip-popper | Styles applied to the Popper component. |
popperInteractive | .MuiTooltip-popperInteractive | Styles applied to the Popper component unless disableInteractive={true} . |
popperArrow | .MuiTooltip-popperArrow | Styles applied to the Popper component if arrow={true} . |
popperClose | .MuiTooltip-popperClose | Styles applied to the Popper component unless the tooltip is open. |
tooltip | .MuiTooltip-tooltip | Styles applied to the tooltip (label wrapper) element. |
tooltipArrow | .MuiTooltip-tooltipArrow | Styles applied to the tooltip (label wrapper) element if arrow={true} . |
arrow | .MuiTooltip-arrow | Styles applied to the arrow element. |
touch | .MuiTooltip-touch | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. |
tooltipPlacementLeft | .MuiTooltip-tooltipPlacementLeft | Styles applied to the tooltip (label wrapper) element if placement contains "left". |
tooltipPlacementRight | .MuiTooltip-tooltipPlacementRight | Styles applied to the tooltip (label wrapper) element if placement contains "right". |
tooltipPlacementTop | .MuiTooltip-tooltipPlacementTop | Styles applied to the tooltip (label wrapper) element if placement contains "top". |
tooltipPlacementBottom | .MuiTooltip-tooltipPlacementBottom | Styles applied to the tooltip (label wrapper) element if placement contains "bottom". |
您可以使用组件自定义选项对组件进行个性化:
- 具备 全局类名.
- 在自定义主体中,设定一个规则名称作为组件的
styleOverrides
属性的一部分。