NGX-Bootstrap - Angular - close tooltip manually

Question

I currently try to manually close a tooltip bye his inner button. I use the tooltipDirective to trigger either tooltip.show() or tooltip.hide() method. But it does not work. It is everytime saying ...elm.show() is not a function . The used markup looks as follows:

<ng-template #tooltip>
     <button type="button" class="btn btn-danger" (click)="elm.hide()">Cancel</button>
</ng-template>

<button type="button" triggers="" placement="bottom" (click)="elm.show()"
         class="btn btn-success" [tooltip]="tooltip">
 Publish
</button>

Does anyone know how to close the tooltip from the component? The elm in the component looks as follows:

@ViewChild('tooltip') elm: TooltipDirective;

I provided a configured Stackblitz, to test around if it helps: Example

Answer 1

To trigger it manually you should refer to tooltip directive that resides on button[tooltip] in your template:

html

<button ... #tooltipTrigger="bs-tooltip" (click)="tooltipTrigger.show()"

You may ask: where I find bs-tooltip string? (In source code https://github.com/valor-software/ngx-bootstrap/blob/d9a89b427fa5c79d94cd609cdf574eaf7a143bf5/src/tooltip/tooltip.directive.ts#L25 )

Also in order to close tooltip you have to override default behaviour with pointer-events: none

global-styles.css

.tooltip.tooltip.tooltip {
  pointer-events: all;
}

or

.tooltip {
  pointer-events: all !important;
}

Stackblitz Example