Tooltip

Tooltips muestran texto informativo cuando los usuarios se desplazan, se concentran o tocan un elemento.

When activated, Tooltips display a text label identifying an element, such as a description of its function.

Simple Tooltips

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

Positioned tooltips

El Tooltip tiene 12 posiciones para elegir. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.

Tooltips personalizados

Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

Arrow tooltips

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. El tooltip necesita aplicar los oyentes de eventos DOM a su elemento hijo.

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.

Controlled tooltips

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>

Variable width

El Tooltip envuelve texto largo por defecto para hacerlo legible.

<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

Tooltips are interactive by default (to pass WCAG 2.1 success criterion 1.4.13). No se cerrará cuando el usuario pase sobre el tooltip antes de que el leaveDelay expire. No se cerrará cuando el usuario pase sobre el tooltip antes de que el leaveDelay expire.

<Tooltip title="Add" disableInteractive>
  <Button>Not interactive</Button>
</Tooltip>

Disabled elements

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>

Follow cursor

You can enable the tooltip to follow the cursor by setting followCursor={true}.

Disabled Action

<Tooltip title="You don't have permission to do this" followCursor>
  <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
    Disabled Action
  </Box>
</Tooltip>

Virtual element

In the event you need to implement a custom placement, you can use the anchorEl prop: The value of the anchorEl prop can be a reference to a fake DOM element. You need to create an object shaped like the VirtualElement.

Hover

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>

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tooltip)

Por defecto, Tooltip solo etiqueta a su elemento hijo. This is notably different from title which can either label or describe its child depending on whether the child already has a label. Por ejemplo, en:

<button title="más información">Un botón</button>

el title actúa como una descripción accesible. Si quieres que Tooltip actúe como una descripción accesible, puedes utilizar describeChild. Ten en cuenta que no deberías usar describeChild si Tooltip es la única etiqueta visual. De lo contrario, el hijo no tendría un nombre accesible y la descripción violaría criterio de éxito 2.5.3 en WCAG 2.1.

⚠️ Missing demo `páginas/componentes/tooltips/AccessibilityTooltips.js` ⚠️

API

<Tooltip />