Tooltip

Dicas exibem texto informativo quando os usuários passam o mouse, focalizam ou tocam em um elemento.

Quando ativada, dicas exibem um rótulo de texto identificando o elemento, como uma descrição de sua função.

Dicas simples

Dicas posicionadas

The Tooltip has 12 placement choices. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.

Dicas customizadas

Aqui estão alguns exemplos de customização do componente. You can learn more about this in the overrides documentation page.

Dicas com seta

Você pode usar a propriedade arrow para dar à sua dica uma seta indicando a qual elemento se refere.

Elemento filho customizado

The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its props to the underlying DOM element.

const MyComponent = React.forwardRef(function MyComponent(props, ref) {
  //  Distribua as propriedades para o elemento DOM subjacente.
  return <div {...props} ref={ref}>Bin</div>
});

// ...

<Tooltip title="Excluir">
  <MyComponent>
</Tooltip>

You can find a similar concept in the wrapping components guide.

If using a class component as a child, you'll also need to ensure that the ref is forwarded to the underlying DOM element. (A ref to the class component itself will not work.)

class MyComponent extends React.Component {
  render() {
    const { innerRef, ...props } = this.props;
    //  Spread the props to the underlying DOM element.
    return <div {...props} ref={innerRef}>Bin</div>
  }
};

// Wrap MyComponent to forward the ref as expected by Tooltip
const WrappedMyComponent = React.forwardRef(function WrappedMyComponent(props, ref) {
  return <MyComponent {...props} innerRef={ref} />;
});

// ...

<Tooltip title="Delete">
  <WrappedMyComponent>
</Tooltip>

Gatilhos

You can define the types of events that cause a tooltip to show.

The touch action requires a long press due to the enterTouchDelay prop being set to 700ms by default.

Dicas controladas

You can use the open, onOpen and onClose props to control the behavior of the tooltip.

Largura variável

The Tooltip wraps long text by default to make it readable.

Interativo

Tooltips are interactive by default (to pass WCAG 2.1 success criterion 1.4.13). It won't close when the user hovers over the tooltip before the leaveDelay is expired. You can disable this behavior (thus failing the success criterion which is required to reach level AA) by passing disableInteractive.

Elementos desabilitados

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.

<Tooltip title="You don't have permission to do this">
  <span>
    <button disabled={disabled} style={disabled ? { pointerEvents: 'none' } : {}}>
      A disabled button
    </button>
  </span>
</Tooltip>

Transições

Use a different transition.

Seguir o cursor

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

Elemento virtual

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.

Exibindo e ocultando

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 enterDelay and leaveDelay props, 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 prop.

Acessibilidade

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)

By default, the tooltip only labels its child element. This is notably different from title which can either label or describe its child depending on whether the child already has a label. For example, in:

<button title="some more information">A button</button>

the title acts as an accessible description. If you want the tooltip to act as an accessible description you can pass describeChild. Note that you shouldn't use describeChild if the tooltip provides the only visual label. Otherwise, the child would have no accessible name and the tooltip would violate success criterion 2.5.3 in WCAG 2.1.

API

• <Tooltip />