How To

Show Tooltip on disabled elements

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
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);

Load HTML tags into tooltip

The Tooltip component loads HTML tags using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

Here, Bold, Italic, Underline, and Anchor tags are used.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id="content">
        <h2>HTML Tags</h2>
          Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
      </div>
      <div class="tooltipContent">
        <ejs-tooltip #tooltip id="tooltip" position='BottomCenter'>
          <ng-template #content>
            <div>
              Through templates,<b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
            </div>
          </ng-template>
          <input ejs-button type="button" class="text" id="Title" value="HTML(With Title)" />
        </ejs-tooltip>
      </div>
    `,
    encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
 * 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);

Define tooltip open mode property

The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode:

* Auto
* Hover
* Click
* Focus
* Custom

** Auto **

Tooltip appears when you hover over the target or when the target element receives the focus.

** Hover **

Tooltip appears when you hover over the target.

** Click **

Tooltip appears when you click a target element.

** Focus **

Tooltip appears when you focus (say through tab key) on a target element.

** Custom **

Tooltip is not triggered by any default action. So, bind your own events and use either open or close public methods.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'my-app',
    template: `
    <div id="sample">
    <div id="first">
    <ejs-tooltip id="showTooltip" opensOn='Hover' content='Tooltip from hover' position='BottomCenter'>
        <button class="blocks" id="tooltiphover">Hover me</button>
    </ejs-tooltip>
    <ejs-tooltip id="showTooltip" opensOn='Click' content='Tooltip from click' position='BottomCenter'>
          <button class="blocks" id="tooltipclick">Click me</button>
    </ejs-tooltip>
    </div>
    <div id="second">
    <ejs-tooltip id="showTooltip" content='Click close icon to close me' [isSticky]='true' position='BottomCenter'>
          <button class="blocks" id="tooltipclick">Sticky mode</button>
    </ejs-tooltip>
    <ejs-tooltip id="showTooltip" content='Opens and closes Tooltip with delay of <i>1000 milliseconds</i>' position='BottomCenter' [openDelay]='1000' [closeDelay]='1000'>
          <button class="blocks" id="tooltipclick">Tooltip with delay</button>
    </ejs-tooltip>
    </div>
    <div id="third">
    <ejs-tooltip #tooltip id="showTooltip" content='Tooltip from custom mode' opensOn='Custom' position='BottomCenter' (dblclick)='customOpen($event)'>
          <button class="blocks" id="tooltipclick">Double Click on Me</button>
    </ejs-tooltip>
    <ejs-tooltip #tooltip id="showTooltip" content='Tooltip from focus' position='BottomCenter'>
           <div id="textbox" class="e-float-input">
              <input id="focus" type="text" placeholder="Focus and blur"/>
           </div>
    </ejs-tooltip>
    </div>
    </div>
    `,
})

export class AppComponent {
    @ViewChild('tooltip')
    public tooltipCustom: TooltipComponent;
    constructor() { }
     customOpen(args: any): void {
        if (args.target.getAttribute("data-tooltip-id")) {
            this.tooltipCustom.close();
        } else {
            this.tooltipCustom.open(args.target);
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule
    ],
    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);

Create and show tooltip on multiple targets

Tooltip can be created and shown on multiple targets within a container by defining the specific target elements to the target property. So, the tooltip is initialized only on matched targets within a container.

In this case, the tooltip content is assigned from the title attribute of the target element.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id="tool">
           <form id="details" role="form">
        <div id="user">
          <div class="info">User Name:</div>
          <ejs-tooltip #tooltip position='RightCenter' title="Please enter your name">
          <div class="inputs"><input type="text" id="uname" class="e-info e-input" name="firstname" title="Please enter your name"></div>
        </ejs-tooltip>
        </div>
        <br/>
        <div>
          <div class="info">Email Address:</div>
          <ejs-tooltip position='RightCenter' title="Enter a valid email address">
          <div class="inputs"><input type="text" id="mail" class="e-info e-input" name="email" title="Enter a valid email address"></div>
        </ejs-tooltip>
        </div>
        <br/>
        <div>
          <div class="info">Password:</div>
          <ejs-tooltip #tooltippwd position='RightCenter' title="Be at least 8 characters length">
          <div class="inputs"><input id="pwd" type="password" class="e-info e-input" name="password" title="Be at least 8 characters length"></div>
        </ejs-tooltip>
        </div>
        <br/>
        <div>
          <div class="info">Confirm Password:</div>
          <ejs-tooltip position='RightCenter' title="Re-enter your password">
          <div class="inputs"><input id="cpwd" type="password" class="e-info e-input" name="Cpwd" title="Re-enter your password"></div>
        </ejs-tooltip>
        </div>
        <br/>
        <div class="btn">
          <input id="sample" ejs-button type="button" value="Submit" (click)="submitdata($event)" />
          <input id="clear" ejs-button type="reset" value="Reset" (click)="cleardata($event)" />
        </div>
      </form>
      </div>
        `,
})

export class AppComponent {
  @ViewChild('tooltip')
  tooltip: TooltipComponent
  @ViewChild('tooltippwd')
  tooltipcontrol: TooltipComponent
  submitdata(event){
  let name = document.getElementById('uname').value;
  let pwd = document.getElementById('pwd').value;
  let cpwd = document.getElementById('cpwd').value;
  if(name.length > 0 & name.length < 4){
    document.getElementById('uname').title = 'Required Minimum 4 Characters';
    document.getElementById('uname').style.backgroundColor = 'red';
    let target = document.getElementById('uname');
    this.tooltip.open(target);
  } else {
     document.getElementById('uname').style.backgroundColor = 'white';
  }
  if(pwd !== '' && pwd.length < 8){
     document.getElementById('pwd').title = 'Required Minimum 8 Characters';
    document.getElementById('pwd').style.backgroundColor = 'red';
    let pwdtarget = document.getElementById('pwd');
    this.tooltipcontrol.open(pwdtarget);
  } else {
     document.getElementById('pwd').style.backgroundColor = 'white';
  }
  if(name.length >= 4 && pwd !== '' && pwd.length >= 8  &&  pwd == cpwd ){
     alert('Form Submitted');
  } else {
     alert('Details are not Valid');
  }
}
cleardata(event){
  document.getElementById('uname').style.backgroundColor = 'white';
  document.getElementById('pwd').style.backgroundColor = 'white';
  let target = document.getElementById('uname');
  this.tooltip.close(target);
  document.getElementById('uname').title = 'Please enter your name';
  let pwdtarget = document.getElementById('pwd');
  this.tooltipcontrol.close(pwdtarget);
}
}
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);

Change tooltip content dynamically

The tooltip content can be changed dynamically using the AJAX request.

The AJAX request should be made within the beforeRender event of the tooltip. On every success, the corresponding retrieved data will be set to the content property of the tooltip.

When you hover over the icons, its respective data will be retrieved dynamically and then assigned to the tooltip’s content.

Refer to the following code snippet to change the tooltip content dynamically.

onBeforeRender(args: TooltipEventArgs): void {
    this.content = 'Loading...';
    this.dataBind();
    let ajax: Ajax = new Ajax('./tooltip.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            for (let i: number = 0; i < result.length; i++) {
                if (result[i].Id == args.target.id) {
                    /* tslint:disable */
                    this.content = result[i].Name;
                    /* tslint:enable */
                }
            }
            this.dataBind();
        },
        (reason: any) => {
            this.content = reason.message;
            this.dataBind();
        });
}
Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild } from '@angular/core';
import { Ajax } from '@syncfusion/ej2-base';
import {TooltipEventArgs } from '@synfusion/ej2-popus';
@Component({
    selector: 'my-app',
    template: `
    <div id="tool">
     <h2> Dynamic Tooltip content </h2>
      <ejs-tooltip #tooltip id='tooltip' content='Loading...' target=".circletool" [showTipPointer]='false' (beforeRender)="onBeforeRender($event)">
              <div id="box">
                <div id='1' class="circletool bold-01"></div>
                <div id='2' class="circletool italic"></div>
                <div id='3' class="circletool underline-02"></div>
                <div id='4' class="circletool cut-02"></div>
                <div id='5' class="circletool copy"></div>
                <div id='6' class="circletool paste"></div>
              </div>
      </ejs-tooltip>
    </div>
    `,
})

export class AppComponent  {
   @ViewChild('tooltip')
    public tooltipControl: TooltipComponent;
  constructor(){}
  onBeforeRender(args: TooltipEventArgs): void {
    this.tooltipControl.content = 'Loading...';
    this.tooltipControl.dataBind();
    let ajax: Ajax = new Ajax('./tooltipdata.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            for (let i: number = 0; i < result.length; i++) {
                if (result[i].Id == args.target.id) {
                    /* tslint:disable */
                    this.tooltipControl.content = result[i].Name;
                    /* tslint:enable */
                }
            }
            this.tooltipControl.dataBind();
        },
        (reason: any) => {
            this.tooltipControl.content = reason.message;
            this.tooltipControl.dataBind();
        });
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule, RadioButtonModule
    ],
    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);

Tooltip Content Template

The Tooltip component content can be loaded through template support. Refer to the below code snippet.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <ejs-tooltip style="display:block;position:absolute;left:calc( 50% - 60px);top:45%;">
            <button ejs-button >Show Tooltip</button>
            <ng-template #content >
              Tooltip content here!!!
            </ng-template>
        </ejs-tooltip>
    `,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
 * 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);

Customize tooltip

The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side. The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to the tooltip positions like TopCenter, BottomLeft, RightTop, and more.

Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.

** Curved tip **

The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the following CSS class of tip arrow.

      .e-arrow-tip-outer.e-tip-bottom,
      .e-arrow-tip-outer.e-tip-top {
           border-left: none !important;
           border-right: none !important;
           border-top: none !important;
      }
      .e-arrow-tip.e-tip-top {
           transform: rotate(170deg);
      }

** Bubble tip **

The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize the bubble tip arrow, override the following CSS class of tip arrow.

    .e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
      {
         border-radius: 50px;
         height: 10px;
         width: 10px;
      }

      .e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
        {
         border-radius: 50px;
         height: 10px;
         width: 10px;
        }

These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip position can be changed by using the radio button click event.

The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
import { RadioButtonComponent, ChangeArgs, ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'my-app',
    template: `
     <div id="customization">
      <ejs-tooltip #tooltipcurve cssClass='curvetips e-tooltip-css' content='Tooltip arrow customized'>
            <button id="target">
                Curve Tip Arrow
            </button>
        </ejs-tooltip>
       </div>
        <div id="positions">
            <ul>
             <li><ejs-radiobutton label="TopCenter" value="TopCenter" name="state" checked='true' (change)="onChange($event)"></ejs-radiobutton></li>
              <li><ejs-radiobutton label="BottomLeft" value="BottomLeft" name="state" (change)="onChange($event)"></ejs-radiobutton></li>
            </ul>
        </div>
     <div id="balloon">
      <ejs-tooltip #tooltip cssClass='bubbletip e-tooltip-css' content='Tooltip arrow customized as balloon tip' position='TopRight'>
            <button id="bubbletip">
                Bubble Tip Arrow
            </button>
        </ejs-tooltip>
       </div>
        <div id="btn">
            <ul>
             <li><ejs-radiobutton label="TopRight" value="TopRight" name="default" [checked]="true" (change)="onChanged($event)"></ejs-radiobutton></li>
              <li><ejs-radiobutton label="BottomLeft" value="BottomLeft" name="default" (change)="onChanged($event)"></ejs-radiobutton></li>
            </ul>
        </div>
        <ejs-tooltip #tooltip cssClass='pointertip e-tooltip-css' content='Disabled Tooltip Pointer' mouseTrail='true' [showTipPointer]='false'>
        <button id="tooltip">
            Disabled Tip Arrow
        </button>
        </ejs-tooltip>
    `,
    encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
    @ViewChild('tooltip')
    public tooltipCustom: TooltipComponent;
    @ViewChild('tooltipcurve')
    public tooltipCurve: TooltipComponent;
    constructor() { }
    onChange(args: ChangeArgs): void {
        this.tooltipCurve.position = args.value as any;
        this.tooltipCurve.dataBind();
    }
    onChanged(args: ChangeArgs): void {
         this.tooltipCustom.position = args.value as any;
        if( this.tooltipCustom.position == 'BottomLeft'){
             this.tooltipCustom.offsetY = -30;
        } else {
             this.tooltipCustom.offsetY = 0;
        }
         this.tooltipCustom.dataBind();
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule, RadioButtonModule
    ],
    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);

Display tooltip on SVG and canvas elements

Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show tooltips on data visualization elements.

** SVG **

Create the SVG square element and refer to the following code snippet to render the tooltip on SVG square.

        <ejs-tooltip cssClass='e-tooltip-css' content='SVG Square' target='#square'>
            <svg>
                <rect id="square" class="shape" x="50" y="20" width="50" height="50" style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9" />
            </svg>
        </ejs-tooltip>

** Canvas **

Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas circle.

        <ejs-tooltip cssClass='e-tooltip-css' content='Canvas Circle' target='#circle'>
            <canvas #circle id="circle" class="shape" width="60" height="60"></canvas>
        </ejs-tooltip>
Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild, ViewEncapsulation, ElementRef } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'my-app',
    template: `
      <div id="box">
        <div class="circletool" id="rectShape" style="left:1%;top:10%">
          <ejs-tooltip cssClass='e-tooltip-css' content='SVG Square' target='#square'>
              <svg>
                <rect id="square" class="shape" x="50" y="20" width="50" height="50" style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9" />
              </svg>
          </ejs-tooltip>
        </div>

        <div class="circletool" id="ellipseShape" style="top:63%;">
          <ejs-tooltip cssClass='e-tooltip-css' content='SVG Ellipse' target='#ellipse'>
              <svg>
                <ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40" style="fill:#0450C2;stroke:none;stroke-width:2" />
              </svg>
          </ejs-tooltip>
        </div>

        <div class="circletool" id="polyShape" style="top:25%;left:40%">
          <ejs-tooltip cssClass='e-tooltip-css'  content='SVG Polyline' target='#polyline'>
              <svg>
                <polyline id="polyline" class="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:#ffffff;stroke:#0450C2;stroke-width:4" />
              </svg>
          </ejs-tooltip>
        </div>

        <div class="circletool" id="circleShape" style="top:16%;left:72%">
          <ejs-tooltip cssClass='e-tooltip-css' content='Canvas Circle' target='#circle'>
            <canvas #circle id="circle" class="shape" width="60" height="60"></canvas>
          </ejs-tooltip>
        </div>

        <div class="circletool" id="triShape" style="top:73%;left:76%">
          <ejs-tooltip cssClass='e-tooltip-css' content='Canvas Triangle' target='#triangle'>
            <canvas #triangle id="triangle" class="shape" width="100" height="50"></canvas>
          </ejs-tooltip>
        </div>
      </div>
    `,
    encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
  public context: any;
  public circlecontext: any;
  @ViewChild('triangle')canvasRef: ElementRef;
  @ViewChild('circle')circleRef: ElementRef;
  ngOnInit(){
if (this.canvasRef.nativeElement.getContext) {
    this.context = this.canvasRef.nativeElement.getContext('2d');
    this.context.beginPath();
    this.context.moveTo(0, 50);
    this.context.lineTo(100, 50);
    this.context.lineTo(50, 0);
    this.context.fillStyle = "#FDA600";
    this.context.fill();
}
this.circlecontext = this.circleRef.nativeElement.getContext('2d');
let centerX: number = this.circleRef.nativeElement.width / 2;
let centerY: number = this.circleRef.nativeElement.height / 2;
let radius: number = 30;
this.circlecontext.beginPath();
this.circlecontext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
this.circlecontext.fillStyle = '#0450C2';
this.circlecontext.fill();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule
    ],
    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);

Load HTML pages into tooltip

Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property, which supports both string and HTML tags.

To load an iframe element in tooltip, set the required iframe in the content of tooltip while initializing the tooltip component. Refer to the following code.

content= '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'my-app',
    template: `
       <div id="tooltipContent">
            <div class="content">
            <ejs-tooltip cssClass='e-tooltip-css' position='BottomCenter' opensOn='Click'>
                <!-- iframe element -->
                 <ng-template #content>
                 <iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
                </ng-template>
                <button ejs-button class="text" id="iframeContent" cssClass='e-outline' isPrimary=true>Embedded Iframe</button>
            </ejs-tooltip>
            </div>
        </div>`,
    encapsulation: ViewEncapsulation.None,
})

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);