Blazor Tooltip

The Ignite UI for Blazor Tooltip component provides a way to display a tooltip for a specific element. A tooltip is a popup that displays information related to an element, usually when the element receives keyboard focus or when the mouse hovers over it.

Getting Started

Before using the IgbTooltip, you need to register it as follows:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));

You will also need to link an additional CSS file to apply the styling to the IgbTooltip component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.

Now you can start with a basic configuration of the Blazor IgbTooltip.

<IgbTooltip Anchor="hover-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

Usage

Tooltip target

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

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

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

The IgbTooltip content can be more than just simple text. Since the IgbTooltip 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 IgbTooltip, you can use the ShowDelay and HideDelay properties. Both properties accept a number value representing time in milliseconds.

<IgbTooltip ShowDelay="600" HideDelay="800">
  Her name is Madelyn James.
</IgbTooltip>

[!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 IgbTooltip 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 IgbTooltip below the target element.

Additionally, you can make the IgbTooltip "sticky" using the Sticky property, which adds a close button and keeps the IgbTooltip 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 IgbTooltip from disappearing when the user stops hovering over the target element.

The IgbTooltip 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.

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
  Congrats you have hovered the button!
</IgbTooltip>

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 IgbTooltip 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 IgbTooltip appears and disappears. These properties accept event names as values—such as click, focus, or keypress—letting you trigger the IgbTooltip in different scenarios.

Advanced Example

The IgbTooltip 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 IgbList, IgbAvatar, IgbIcon, IgbBadge, IgbButton, IgbCard and IgbCategoryChart components.

Additional Properties

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

Name	Type	Description
`Open`	boolean	Determines whether the tooltip is visible.
`WithArrow`	boolean	Determines whether to render an arrow indicator for the tooltip.
`Offset`	number	Sets the pixel distance between the tooltip and its `Anchor`.

Methods

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

Name	Description
`Show`	Displays the tooltip if it’s not already shown. If a target is provided, it sets the target as a transient `Anchor`.
`Hide`	Hides the tooltip if it’s not already hidden.
`Toggle`	Toggles the tooltip between the shown and hidden states.

Accessibility & ARIA Support

The IgbTooltip 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 IgbTooltip component exposes two CSS parts that you can use for styling:

Name	Description
`base`	The base wrapper of the tooltip component.
`top, right, bottom, left ...`	The area containing the tooltip arrow. The part name matches the value of the tooltip placement property.

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);
}

Ignite UI for Blazor Tooltip Example