diff --git a/src/app/tooltip/tooltip.sample.html b/src/app/tooltip/tooltip.sample.html index a21360e2634..c25c210dd22 100644 --- a/src/app/tooltip/tooltip.sample.html +++ b/src/app/tooltip/tooltip.sample.html @@ -53,6 +53,20 @@

Simple tooltip settings

+
+

WebComponents tooltip

+
+ Hover over me +
+ + + Hello from the tooltip! + + +
+

Rich tooltip

diff --git a/src/app/tooltip/tooltip.sample.ts b/src/app/tooltip/tooltip.sample.ts index 87b45beeaa2..5482ab0e370 100644 --- a/src/app/tooltip/tooltip.sample.ts +++ b/src/app/tooltip/tooltip.sample.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxAvatarComponent, @@ -18,11 +18,18 @@ import { IgxTooltipTargetDirective, OverlaySettings, } from 'igniteui-angular'; +import { + defineComponents, + IgcButtonComponent, + IgcTooltipComponent, +} from 'igniteui-webcomponents'; +defineComponents(IgcTooltipComponent, IgcButtonComponent); @Component({ selector: 'app-tooltip-sample', styleUrls: ['tooltip.sample.css'], templateUrl: 'tooltip.sample.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxIconComponent, IgxIconButtonDirective, IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective] }) export class TooltipSampleComponent implements OnInit {