Search results

Show tooltip on disabled elements and disable tooltip in Angular Tooltip component

05 Aug 2021 / 1 minute to read

By default, Tooltips will not be 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. Now, initialize the Tooltip for outer div element that holds the disabled button element.
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
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 {
}
Copied to clipboard
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 { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);