Show Tooltip on disabled elements in Angular

8 Jan 20252 minutes to read

By default, Tooltips are not displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.

1. Add a disabled element like the button element into a div whose display style is set to inline-block.
2. Set the pointer event as none for the disabled element (button) through CSS.
3. Initialize the Tooltip for the outer div element.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Tooltip from disabled element'>
        <div><input ejs-button type="button" disabled value="Disabled button" /></div>
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: inline-block;
        position: relative;
        top:50px;
        left: 40%;
    }
    #tooltip [disabled] {
        pointer-events: none;
        font-size: 22px;
        padding: 10px;
    }
    `]
})

export class AppComponent {
}

main.ts

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