Tooltip in Angular Progress bar component

27 Apr 20245 minutes to read

Tooltip

The tooltip for the progress bar is used to represent the progress value. During the initial load, it can be enabled by using the enable property. The showTooltipOnHover property can show the tooltip on mouseover.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='90' value=90  [animation]='animation' [tooltip]='tooltip'>
      </ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public animation?: AnimationModel;
    public tooltip: Object = {
        enable: true
    };
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Format

By default, the tooltip shows information about progress. In addition to that, show more information in the tooltip using the format property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='90' value=90  [animation]='animation' [tooltip]='tooltip'>
      </ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public animation?: AnimationModel;
    public tooltip: Object = {
        enable: true,
        format: "Progress: ${value}"
    };
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customization

The fill and border properties are used to customize the background color and border of the tooltip respectively. The textStyle property in the tooltip is used to customize the font of the tooltip text.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='90' value=90  [animation]='animation' [tooltip]='tooltip'>
      </ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public animation?: AnimationModel;
    public tooltip: Object = {
        enable: true,
        format: "Progress: ${value}",
        textStyle: {
            fontWeight: '900',
            size: '15px',
            color: 'red',
            fontFamily: 'Roboto',
            fontStyle: 'Italic'
        }
    };
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));