Show Tooltip for Syncfusion Breadcrumb Items in Angular

The Syncfusion Angular Breadcrumb component does not render tooltips on its items by default. Two approaches are available to add tooltip support: setting the native title attribute through the beforeItemRender event, or integrating the Syncfusion Tooltip component for fully styled, customizable tooltips.

Prerequisites

• Install the required Syncfusion Angular packages:

npm install @syncfusion/ej2-angular-navigations @syncfusion/ej2-angular-popups --save

• Import the required modules and types in the component file. The imports below cover both approaches in this guide:

import { Component, ViewChild } from '@angular/core';
// Breadcrumb module, component type, and event args
import { BreadcrumbModule, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-angular-navigations';
// Tooltip module, component type, and event args
import { TooltipModule, TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';

• For module-based Angular projects, register BreadcrumbModule and TooltipModule in the AppModule imports array.

Approach 1: Using the title Attribute via beforeItemRender

The beforeItemRender event fires before each breadcrumb item renders. Use BreadcrumbBeforeItemRenderEventArgs to access the item’s element and set the native HTML title attribute. The browser renders this as a default tooltip on hover.

How It Works

• args.item.text — the label text of the breadcrumb item
• args.item.iconCss — the CSS class for icon-only items (e.g., the home icon)
• args.element — the rendered DOM element for the breadcrumb item; use setAttribute('title', ...) to add the tooltip text

Template

<ejs-breadcrumb (beforeItemRender)="beforeItemRenderHandler($event)">
  <e-breadcrumb-items>
    <e-breadcrumb-item iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
    <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
    <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/menu/default"></e-breadcrumb-item>
    <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

Component

import { Component } from '@angular/core';
import { BreadcrumbModule, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  imports: [BreadcrumbModule],
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
    if (args.item.text) {
      // Set the item label as the native tooltip
      args.element.setAttribute('title', args.item.text);
    }
    if (args.item.iconCss) {
      // Set a descriptive tooltip for icon-only items
      args.element.setAttribute('title', 'Home');
    }
  }
}

Note: The title attribute renders the browser’s built-in tooltip. Its appearance varies across browsers and cannot be styled with CSS.

Output

Approach 2: Using the Syncfusion Tooltip Component

For styled, fully customizable tooltips, use the Syncfusion Tooltip component. Target the .e-anchor-wrap selector inside ejs-breadcrumb and populate tooltip content dynamically in the beforeRender event using the target element’s inner text.

How It Works

• The target property on ejs-tooltip is set to ".e-anchor-wrap" so the tooltip activates on each breadcrumb item’s inner anchor wrapper.
• The beforeRender event provides a TooltipEventArgs object; args.target.innerHTML carries the item’s rendered content to use as tooltip text.
• [enableNavigation]="false" on ejs-breadcrumb disables anchor link rendering on breadcrumb items, so items render as plain text rather than navigable links.

Template

<ejs-tooltip #tooltip id="tooltip" target=".e-anchor-wrap" (beforeRender)="beforeRender($event)">
  <ejs-breadcrumb [enableNavigation]="false">
    <e-breadcrumb-items>
      <e-breadcrumb-item iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
      <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
      <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/menu/default"></e-breadcrumb-item>
      <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
    </e-breadcrumb-items>
  </ejs-breadcrumb>
</ejs-tooltip>

Component

import { Component, ViewChild } from '@angular/core';
import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { TooltipModule, TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';

@Component({
  standalone: true,
  imports: [BreadcrumbModule, TooltipModule],
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('tooltip') public tooltipObj!: TooltipComponent;

  public beforeRender(args: TooltipEventArgs): void {
    // Populate tooltip content with the hovered item's text
    this.tooltipObj.content = args.target.innerHTML;
  }
}

Note: For module-based Angular projects, register BreadcrumbModule and TooltipModule in the AppModule imports array instead of using standalone: true.

Output

Comparison

Use Approach 1 for a lightweight, no-dependency solution. Use Approach 2 when consistent styling, animations, or dynamic content control are required.

Working Sample

• Breadcrumb title attribute tooltip — Approach 1
• Breadcrumb items with Syncfusion Tooltip — Approach 2

API Reference

• Breadcrumb — Angular API — Full API reference for the BreadcrumbComponent
• Breadcrumb.beforeItemRender — Event fired before each breadcrumb item renders; use to set title or modify the DOM element
• BreadcrumbBeforeItemRenderEventArgs — Event argument providing item, element, and cancel properties
• Tooltip — Angular API — Full API reference for the TooltipComponent
• Tooltip.beforeRender — Event fired before the tooltip renders; use to set dynamic content via TooltipEventArgs
• TooltipEventArgs — Event argument providing target, content, and cancel properties