0

I want to check whether to tooltip is open or not in angular 13 with use of isOpen() method.

Example:

<li class="mt-menu-icon-wrapper" placement="right" [ngbTooltip]="tooltip" triggers="manual"(mouseenter)="showTooltip('settings')" (mouseleave)="hideTooltip('settings')" 
[closeDelay]="300" (isOpen)="isOpenFlag" ></li> 

<ng-template #tooltip>
Welcome to New Year Party
</ng-template>`

1 Answers1

2

according to ngbtooltip doc https://ng-bootstrap.github.io/#/components/tooltip/api

isOpen is a method and not an input/output

if you want to set a boolean when tooltip is open or not you can play with the two output hidden and shown

hidden : An event emitted when the tooltip closing animation has finished. Contains no payload.

shown : An event emitted when the tooltip opening animation has finished. Contains no payload.

in your code it can look like

<li class="mt-menu-icon-wrapper" placement="right" [ngbTooltip]="tooltip" triggers="manual"(mouseenter)="showTooltip('settings')" (mouseleave)="hideTooltip('settings')" 
[closeDelay]="300" (shown)="tooltipDisplay(true)" (hidden)="tooltipDisplay(false)"></li>

in controller have a method

tooltipDisplay(isOpen:boolean) {
   this.isOpenFlag = isOpen;
}
jeremy-denis
  • 6,368
  • 3
  • 18
  • 35
  • To use a method, you need a reference to the object. So you should use a template reference variable: (see the `#tootipTop`): ` – Eliseo Dec 20 '21 at 13:00