Tooltip
Tooltips muestran texto informativo cuando los usuarios se desplazan, se concentran o tocan un elemento.
Cuando se activa, Tooltips muestran una etiqueta de texto que identifica un elemento, como una descripción de su función.
Tooltips sencillos
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="primary" className={classes.fab}>
<AddIcon />
</Fab>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="secondary" className={classes.absolute}>
<AddIcon />
</Fab>
</Tooltip>Tooltips posicionados
El Tooltip tiene 12 posiciones para elegir. No tienen flechas direccionales; en cambio, dependen del movimiento que emana de la fuente para transmitir la dirección.
Tooltips personalizados
Here are some examples of customizing the component. Here are some examples of customizing the component.
Tooltip Flecha
Puedes usar el apoyo del prop flecha para dar a tu tooltip una flecha indicando a qué elemento se refiere.
<Tooltip title="Add" arrow>
<Button>Arrow</Button>
</Tooltip>Elemento child personalizado
El tooltip necesita aplicar los oyentes de eventos DOM a su elemento hijo. Si el child es un elemento React personalizado, necesita asegurarse de que difunde sus propiedades al elemento DOM subyacente.
const MyComponent = React.forwardRef(function MyComponent(props, ref) {
// Spread the props to the underlying DOM element.
return <div {...props} ref={ref}>Bin</div>
});
// ...
<Tooltip title="Delete">
<MyComponent>
</Tooltip>Puede encontrar un concepto similar en la guía de componentes de envoltura.
Triggers
Puede definir los tipos de eventos que causan que se muestre un tooltip.
Tooltips controlados
You can use the open, onOpen and onClose properties to control the behavior of the tooltip.
<Tooltip open={open} onClose={handleClose} onOpen={handleOpen} title="Add">
<Button>Controlled</Button>
</Tooltip><Tooltip title={longText}>
<Button className={classes.button}>Default Width [300px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
<Button className={classes.button}>Custom Width [500px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
<Button className={classes.button}>No wrapping</Button>
</Tooltip>Explora
Un tooltip puede ser interactivo. No se cerrará cuando el usuario pase sobre el tooltip antes de que el leaveDelay expire.
<Tooltip title="Add" interactive>
<Button>Interactive</Button>
</Tooltip>Elementos deshabilitados
By default disabled elements like <button> do not trigger user interactions so a Tooltip will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a span.
⚠️ Para trabajar con Safari, necesitas al menos un display block o un elemento flexionado debajo del envoltorio del tooltip.
<Tooltip title="You don't have permission to do this">
<span>
<Button disabled>A Disabled Button</Button>
</span>
</Tooltip>If you're not wrapping a Material-UI component that inherits from
ButtonBase, for instance, a native<button>element, you should also add the CSS property pointer-events: none; to your element when disabled:
<Tooltip title="No tiene permiso de hacer esto">
<span>
<button disabled={disabled} style={disabled ? { pointerEvents: "none" } : {}}>
{'A disabled button'}
</button>
</span>
</Tooltip>Transiciones
Usar una transición diferente.
<Tooltip title="Add">
<Button>Grow</Button>
</Tooltip>
<Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title="Add">
<Button>Fade</Button>
</Tooltip>
<Tooltip TransitionComponent={Zoom} title="Add">
<Button>Zoom</Button>
</Tooltip>Mostrar y ocultar
The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties enterDelay and leaveDelay, as shown in the Controlled Tooltips demo above.
On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the disableTouchListener property.
<Tooltip title="Add" enterDelay={500} leaveDelay={200}>
<Button>[500ms, 200ms]</Button>
</Tooltip>