Custom Tooltip component - button click in tooltip not working

[MM]

Hello, I am trying to create a tooltip that contains a button. UI presentation is ok, but if I try to click on the "logout" button I get an error.

Is there a workaround for this example? 

          <ejs-tooltip #tooltip id='tooltip' width= '200px' height= '55px'

                       cssClass='wsw-tooltip' position="RightCenter"  [isSticky]='true' >

            <ng-template #content>

              <div class="wsw-tooltip-content">

                <h3 class="wsw-logout-text">{{ fullName }}</h3>

                <button mat-raised-button color="primary" (click)="logout()">  {{ LogooutButton }}</button>

              </div>

          </ng-template>

        </ejs-tooltip>

Thank you, M

[Sowmiya Padmanaban]

Hi MM,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with Tooltip component based on your specified package version (@syncfusion/ej2-angular-popups: 17.3.29). But, we were unable to reproduce your reported issue.  

 

We have prepared  a sample based on your shared code snippet. 

       <ejs-tooltip #tooltip target="#content" id='tooltip' width= '200px' height= '55px' position="RightCenter" cssClass='wsw-tooltip' [isSticky]='true' > 

            <div id="customization"> 

            <button ejs-button class="text" id="content">HTML Template</button> 

          </div> 

            <ng-template #content> 

              <div class="wsw-tooltip-content"> 

                <h3 class="wsw-logout-text">Button</h3> 

                <button mat-raised-button color="primary" (click)="click()"> Log out</button> 

              </div> 

          </ng-template> 

        </ejs-tooltip> 

 

   click() { 

    console.log("click triggered"); 

   } 

In the below sample, we have rendered the button inside the Tooltip component and bind the click event for that button. 

 

Sample link : https://stackblitz.com/edit/angular-hzeukm-4x9wgi?file=app.component.html  

 

Can you please ensure the above sample. If the issue still persist, could you please share the following details. It will help us to check and to provide you the prompt solution at the earliest. 

 

1.      Share us, your issue occurring code snippet. 

 

2.      Share the issue replicating video footage. 

 

3.      If possible, reproduce the issue in attached sample. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[MM]

Hello,

The StackBliz link that you send me is broken.

Could you please provide me a new link?

Thank you,

M

[Sowmiya Padmanaban]

Hi Maja,  

 

Sorry for the inconvenience. 

 

Refer the below updated sample link. 

https://stackblitz.com/edit/angular-hzeukm-krneby?file=app.component.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P