React dica de ferramenta

    O componente Ignite UI for React Dica de ferramenta fornece uma maneira de exibir uma dica de ferramenta para um elemento específico. Uma dica de ferramenta é um pop-up que exibe informações relacionadas a um elemento, geralmente quando o elemento recebe o foco do teclado ou quando o mouse passa sobre ele.

    Ignite UI for React Tooltip Example

    Começando

    To start using the IgrTooltip, first, you need to install the Ignite UI for React by running the following command:

    npm install igniteui-react

    After that, you need to import the IgrTooltip component and its necessary CSS as follows:

    import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

    Now you can start with a basic configuration of the React IgrTooltip.

    <IgrTooltip anchor="hover-button">
  Congrats you have hovered the button!
</IgrTooltip>

<IgrButton id="hover-button">Hover me</IgrButton>

    Usage

    Tooltip target

    To attach a tooltip to the desired element, use the anchor property of the IgrTooltip and set it to the ID of the target element.

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button">
  Congrats you have hovered the button!
</IgrTooltip>

    Você também pode especificar o destino passando a instância do elemento diretamente:

    const anchor = document.querySelector('#hover-button') as IgrButton;
const tooltip = document.querySelector('#tooltip') as IgrTooltip;
tooltip.anchor = anchor;

    <IgrTooltip id="tooltip">
  Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>

    Tooltip content

    The tooltip content is defined by placing custom content between the opening and closing tags of the IgrTooltip.

    <IgrTooltip>
  Congrats you have hovered the button!
</IgrTooltip>

    Alternatively, to set simple text, you can use the message property.

    <IgrTooltip message="This is my custom content here."></IgrTooltip>

    If you use both approaches (slotted content and the message property), the slotted content will take priority and the message value will be ignored.

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</IgrTooltip>

    In this example, the slotted content (“I will be shown!”) will be displayed instead of the message property value.

    The IgrTooltip content can be more than just simple text. Since the IgrTooltip is a regular element in the markup, you can enhance its content by adding any elements you need and styling them accordingly.

    Show/Hide delay settings

    If you want to control the delay before showing and hiding the IgrTooltip, you can use the showDelay and hideDelay properties. Both properties accept a number value representing time in milliseconds.

    <IgrTooltip showDelay="600" hideDelay="800">
  Her name is Madelyn James.
</IgrTooltip>

    [!NOTE] It's important to note that the Tooltip API methods — show, hide, and toggle — DO NOT take the showDelay and hideDelay properties into account. They act immediately when invoked.

    Placement

    The IgrTooltip can also be positioned relative to its target element with ease. All you need to do is use the placement property along with one of the PopoverPlacement options.

    If the placement property is not set, the default value is Bottom, which places the IgrTooltip below the target element.

    Additionally, you can make the IgrTooltip "sticky" using the sticky property, which adds a close button and keeps the IgrTooltip visible until the user closes it manually - either by clicking the close button or pressing the Esc key. This behavior overrides the default hover behavior, preventing the IgrTooltip from disappearing when the user stops hovering over the target element.

    The IgrTooltip also includes an optional arrow indicator that can be configured via the withArrow property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's placement.

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky withArrow={true}>
  Congrats you have hovered the button!
</IgrTooltip>

    In the following example, you can see a demonstration of all tooltip placement options, arrow positioning behavior, and the sticky property in action:

    Triggers

    By default, the IgrTooltip is triggered only while hovering over the target element. However, you can change this behavior using the showTriggers and hideTriggers properties, which allow you to control when the IgrTooltip appears and disappears. These properties accept event names as values—such as click, focus, or keypress—letting you trigger the IgrTooltip in different scenarios.

    Advanced Example

    The IgrTooltip integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. In the following example, you can see how we create descriptive tooltips by using the IgrList, IgrAvatar, IgrIcon, IgrBadge, IgrButton, IgrCard and IgrCategoryChart components.

    Additional Properties

    Apart from the properties we've already covered, the IgrTooltip component offers a variety of additional properties that allow you to further configure its behavior, position, and appearance.

    Nome Tipo Descrição
    open booleano Determina se a dica de ferramenta está visível.
    withArrow booleano Determina se um indicador de seta deve ser renderizado para a dica de ferramenta.
    offset número Define a distância de pixels entre a dica de ferramenta e a suaanchor.

    Methods

    In addition to its configurable properties, the IgrTooltip also exposes three methods that you can use:

    Nome Descrição
    show Exibe a dica de ferramenta, se ela ainda não estiver mostrada. Se um destino for fornecido, ele definirá o destino como transitórioanchor.
    hide Oculta a dica de ferramenta se ela ainda não estiver oculta.
    toggle Alterna a dica de ferramenta entre os estados mostrado e oculto.

    Accessibility & ARIA Support

    The IgrTooltip is built with accessibility in mind and includes the following ARIA attributes:

    • role - When the tooltip is in its default behavior, role="tooltip" is applied. If the sticky property is enabled, the role changes to status.
    • inert - Dynamically toggled based on visibility. When the tooltip is hidden, it becomes inert.
    • aria-atomic - Set to true, ensuring that the entire tooltip content is announced when it changes.
    • aria-live - Set to polite, indicating to screen readers that updates should be announced only when the user is idle.

    Styling

    The IgrTooltip component exposes two CSS parts that you can use for styling:

    Nome Descrição
    base O wrapper base do componente de dica de ferramenta.
    top, right, bottom, left ... A área que contém a seta da dica de ferramenta. O nome da peça corresponde ao valor da propriedade de posicionamento da dica de ferramenta. 
    igc-tooltip::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-tooltip::part(bottom) {
  border-bottom-color: var(--ig-primary-500);
}

    API References

    Additional Resources