HelpBot Assistant

How can I help you?

Animation in Angular Tooltip component

26 Feb 202611 minutes to read

Animate the Tooltip using the animation property to control specific animation effects. This property allows you to set the delay, duration, and various other effects.

The AnimationModel applies the chosen animation effect, duration, and other settings to tooltips.

By default, the tooltip enters over 150 ms using the ease-out timing function and exits at 150 ms using the ease-in timing function. The default animation effect is FadeIn for open actions and FadeOut for close actions, with a duration of 150 ms and delay of 0.

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 animation effect' [animation]='TooltipAnimation'>
            Show tooltip
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }
    `]
})

export class AppComponent {
    public TooltipAnimation: Object = {
        open: { effect: 'ZoomIn', duration: 1000, delay: 0 },
        close: { effect: 'ZoomOut', duration: 500, delay: 0 }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Animation effects

The animation effects that are applicable to Tooltips are:

  • FadeIn
  • FadeOut
  • FadeZoomIn
  • FadeZoomOut
  • FlipXDownIn
  • FlipXDownOut
  • FlipXUpIn
  • FlipXUpOut
  • FlipYLeftIn
  • FlipYLeftOut
  • FlipYRightIn
  • FlipYRightOut
  • ZoomIn
  • ZoomOut
  • None

When the effect is set to none, no animation is applied to the tooltip.

Some animation effects work better when the tooltip tip pointer is hidden. Achieve this by setting showTipPointer to false.

Animating via open/close methods

Apply animations dynamically using the open and close methods. These methods accept an optional animation model parameter. If you pass TooltipAnimationSettings, it uses this model; otherwise, it uses values from the animation property. You can apply different animations to tooltips on each target.

The following code snippet demonstrates applying animations using these methods.

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, ViewChild } from '@angular/core';
import { TooltipComponent, TooltipAnimationSettings } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" #tooltipAnimate content='Tooltip animation effect' opensOn='Custom' (click)='onCustomClick($event)'>
            Show tooltip
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }
    `]
})

export class AppComponent {
    @ViewChild('tooltipAnimate')
    public tooltipControl: TooltipComponent | any;
    onCustomClick(args: any): void {
        if (args.target.getAttribute('data-tooltip-id')) {
            let closeAnimation: TooltipAnimationSettings = { effect: 'FadeOut', duration: 1000 }
            this.tooltipControl.close(closeAnimation);
        } else {
            let openAnimation: TooltipAnimationSettings = { effect: 'FadeIn', duration: 1000 }
            this.tooltipControl.open(args.target, openAnimation);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Apply transition

The transition effect can be applied on Tooltips by using the beforeOpen event as given in the following workaround code example.

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, ViewEncapsulation, ViewChild } from '@angular/core';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <h3> Transition effect </h3>
    <ejs-tooltip id="tooltip" #tooltip class="e-prevent-select" target='.circle-tool' [closeDelay]='1000' [animation]='Animation'
     (beforeRender)='onBeforeRender($event)' (beforeOpen)='onBeforeOpen($event)' (afterClose)='onAfterClose($event)'>
        <div class="circle-tool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
        <div class="circle-tool" style="top:30%;left:30%" title="This is Snake !!!"></div>
        <div class="circle-tool" style="top:80%;left:80%" title="This is Croc !!!"></div>
        <div class="circle-tool" style="top:65%;left:50%" title="This is String Ray !!!"></div>
        <div class="circle-tool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
        <div class="circle-tool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        border: 1px solid #c8c8c8;
        height: 200px;
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
    }

    .circle-tool {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #9acd32;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    `],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('tooltip')
    public tooltipControl: TooltipComponent | any;
    public Animation: Object = {
        open: { effect: 'ZoomIn', duration: 500 },
        close: { effect: 'ZoomOut', duration: 500 }
    };
    onBeforeRender(args: TooltipEventArgs): void {
        if (args.element) {
            this.tooltipControl.animation = { open: { effect: 'None' } };
        }
    }
    onBeforeOpen(args: TooltipEventArgs): void {
        if (args.element) {
            args.element.style.display = 'block';
            args.element.style.transitionProperty = 'left,top';
            args.element.style.transitionDuration = '1000ms';
        }
    }
    onAfterClose(args: TooltipEventArgs): void {
        this.tooltipControl.animation = {
            open: { effect: 'ZoomIn', duration: 500 },
            close: { effect: 'ZoomOut', duration: 500 }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));