How to close boostrap info using click event in angular18

I am tryinjg to show info message when we click on the info button. But if i mouseover the button the info message is showing. I want to show only if i click the info button. Not mouseover.

Also when i click the close button inside info ng-template, The info message also want to close. close event is not working.

My code is not working. Where i want to change in my code to get the solution.

I am using ngx-bootstrap: 18.1.3

app.component.html:

<button class="sr-info-icon-set sr-info-control" style="margin: auto;" [tooltip]="staticHtmlTooltip" container="body" (click)="toggleTooltip()" > Info </button> <ng-template #staticHtmlTooltip> <div class="tooltip-content"> <div>Your content here...</div> <div>More content if needed...</div> <button class="btn btn-xs btn-default" (click)="closeInfo(); $event.stopPropagation()"> Close </button> </div> </ng-template>

app.component.ts:

import { Component, ViewChild } from '@angular/core'; import { TooltipDirective } from 'ngx-bootstrap'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { @ViewChild(TooltipDirective) tooltip?: TooltipDirective; isTooltipOpen = false; toggleTooltip(): void { if (this.isTooltipOpen) { this.tooltip?.hide(); } else { this.tooltip?.show(); } this.isTooltipOpen = !this.isTooltipOpen; } closeInfo(): void { this.tooltip?.hide(); this.isTooltipOpen = false; } }

Demo: https://stackblitz.com/edit/ngx-bootstrap-example-tfihsrnj?file=app%2Fapp.component.html