Search code examples
angulartwitter-bootstrapngx-bootstrap

NGX-Bootstrap - Angular - close tooltip manually

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

Solution

  • 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