Tooltip API
Documentação da API para o componente React Tooltip . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Tooltip from '@mui/material/Tooltip';
// ou
import { Tooltip } from '@mui/material';Nome do componente
The nameMuiTooltip can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| 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 | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| 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) => voidevent: The event source of the callback. | |
| onOpen | func | Callback fired when the component requests to be open. Signature: function(event: object) => voidevent: 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. |
| 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. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| popper | .MuiTooltip-popper | Estilos aplicados a the Popper component. |
| popperInteractive | .MuiTooltip-popperInteractive | Estilos aplicados em the Popper component a menos que disableInteractive={true}. |
| popperArrow | .MuiTooltip-popperArrow | Estilos aplicados para the Popper component se arrow={true}. |
| popperClose | .MuiTooltip-popperClose | Estilos aplicados em the Popper component a menos que the tooltip is open. |
| tooltip | .MuiTooltip-tooltip | Estilos aplicados a the tooltip (label wrapper) element. |
| tooltipArrow | .MuiTooltip-tooltipArrow | Estilos aplicados para the tooltip (label wrapper) element se arrow={true}. |
| arrow | .MuiTooltip-arrow | Estilos aplicados a the arrow element. |
| touch | .MuiTooltip-touch | Estilos aplicados para the tooltip (label wrapper) element se the tooltip is opened by touch. |
| tooltipPlacementLeft | .MuiTooltip-tooltipPlacementLeft | Estilos aplicados para the tooltip (label wrapper) element se placement contains "left". |
| tooltipPlacementRight | .MuiTooltip-tooltipPlacementRight | Estilos aplicados para the tooltip (label wrapper) element se placement contains "right". |
| tooltipPlacementTop | .MuiTooltip-tooltipPlacementTop | Estilos aplicados para the tooltip (label wrapper) element se placement contains "top". |
| tooltipPlacementBottom | .MuiTooltip-tooltipPlacementBottom | Estilos aplicados para the tooltip (label wrapper) element se placement contains "bottom". |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.