By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.
button
element into a div whose display style is set to inline-block
.none
for the disabled element (button) through CSS.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 {
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);