Pular para o conteúdo
Ajude a traduzir esta página

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';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiTooltip can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
children*element
Tooltip reference element.
⚠️ Needs to be able to hold a ref.
title*node
Tooltip title. Zero-length titles string are never displayed.
arrowboolfalse
If true, adds an arrow to the tooltip.
classesobject
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.
describeChildboolfalse
Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child.
disableFocusListenerboolfalse
Do not respond to focus-visible events.
disableHoverListenerboolfalse
Do not respond to hover events.
disableInteractiveboolfalse
Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the leaveDelay is expired.
disableTouchListenerboolfalse
Do not respond to long press touch events.
enterDelaynumber100
The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay).
enterNextDelaynumber0
The number of milliseconds to wait before showing the tooltip when one was already recently opened.
enterTouchDelaynumber700
The number of milliseconds a user must touch the element before showing the tooltip.
followCursorboolfalse
If true, the tooltip follow the cursor over the wrapped element.
idstring
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.
leaveDelaynumber0
The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay).
leaveTouchDelaynumber1500
The number of milliseconds after the user stops touching an element before hiding the tooltip.
onClosefunc
Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.
onOpenfunc
Callback fired when the component requests to be open.

Signature:
function(event: object) => void
event: The event source of the callback.
openboolfalse
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.
PopperComponentelementTypePopper
The component used for the popper.
PopperPropsobject{}
Props applied to the Popper element.
sxArray<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.
TransitionComponentelementTypeGrow
The component used for the transition. Follow this guide to learn more about the requirements for this component.
TransitionPropsobject
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 regraClasse globalDescrição
popper.MuiTooltip-popperEstilos aplicados a the Popper component.
popperInteractive.MuiTooltip-popperInteractiveEstilos aplicados em the Popper component a menos que disableInteractive={true}.
popperArrow.MuiTooltip-popperArrowEstilos aplicados para the Popper component se arrow={true}.
popperClose.MuiTooltip-popperCloseEstilos aplicados em the Popper component a menos que the tooltip is open.
tooltip.MuiTooltip-tooltipEstilos aplicados a the tooltip (label wrapper) element.
tooltipArrow.MuiTooltip-tooltipArrowEstilos aplicados para the tooltip (label wrapper) element se arrow={true}.
arrow.MuiTooltip-arrowEstilos aplicados a the arrow element.
touch.MuiTooltip-touchEstilos aplicados para the tooltip (label wrapper) element se the tooltip is opened by touch.
tooltipPlacementLeft.MuiTooltip-tooltipPlacementLeftEstilos aplicados para the tooltip (label wrapper) element se placement contains "left".
tooltipPlacementRight.MuiTooltip-tooltipPlacementRightEstilos aplicados para the tooltip (label wrapper) element se placement contains "right".
tooltipPlacementTop.MuiTooltip-tooltipPlacementTopEstilos aplicados para the tooltip (label wrapper) element se placement contains "top".
tooltipPlacementBottom.MuiTooltip-tooltipPlacementBottomEstilos 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:

Demonstrações