We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add async tooltip on event

hello,

I have a scheduler and I would like to add tooltip template with async pipe to get my content.
I have set this king on template like this.

getTooltip method is just an observable who is return string value

When I navigate on event inside my browser it just open tooltip with empty value.


In addition I would like to open this tooltip just on click with sticky mode could you please provide me an example? thx


here a stackbliz : https://stackblitz.com/edit/angular-schedule-tooltip-2pct31?file=app.component.ts


<ng-template #eventSettingsTooltipTemplate let-data>
<ng-container *ngIf="getTooltip(data) | async as tooltip"
><div [innerHTML]="tooltip | safeHtml">div
>ng-container>
ng-template>

1 Reply

SR Swathi Ravi Syncfusion Team January 20, 2023 04:16 PM UTC

Hi Bernard,


When I navigate on event inside my browser it just open tooltip with empty value.


You can get the tooltip content using async pipe method like the below shared snippet.


Sample: https://stackblitz.com/edit/angular-schedule-tooltip-hy4t7b?file=app.component.ts


[app.component.ts]

getTooltip: Observable<string>;

  ngOnInit() {

    this.getTooltip = of('tooltip').pipe(

      delay(100),

      tap((c=> {

        console.log('toto');

      })

    );

  }


[app.component.Html]

<ng-template #eventSettingsTooltipTemplate let-data>

        <ng-container *ngIf="getTooltip | async as tooltip">

          <div [innerHTML]="tooltip">

          </div>

        </ng-container>

 </ng-template>



In addition I would like to open this tooltip just on click with sticky mode could you please provide me an example? 


If you want the tooltip to appear in sticky mode on event click. You can use the quickinfo template instead of a tooltip and customize it as needed. Before using this quick info template, disable the tooltip.


Demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/quick-info-template

UG: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/quick-info-template


Regards,

Swathi Ravi


Loader.
Up arrow icon