You can use the context and manual triggers functionality of ngb-tooltip to achieve this.

In your HTML, define the tooltip:

<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>

The above HTML will display the value of the variable greeting as the text in the tooltip.

Also define the button (or other HTML) element that you want the tooltip to appear on

<button

  type="button"

  class="btn btn-outline-secondary mr-2"

  [ngbTooltip]="tipContent"

  triggers="manual"

  #t1="ngbTooltip"

  (mouseover)="openTooltip(t1, 'text 1')"

  (mouseout)="closeTooltip(t1)"

  (click)="openTooltip(t1, 'text 2')">

      Tooltip on top

</button>

This uses manual triggers, and you can bind to the mouseover and mouseout events to display the tooltip text 1 on hovering over the button. The click binding will display the tooltip text 2 when clicking on the button.

The openTooltip function is defined in the TypeScript file opens the tooltip passing in the text that was passed in as an argument to the method. The line tooltip.close() is required otherwise the clicking on the button to display the text 2 tooltip will not work:

openTooltip(tooltip, greeting: string) {

  tooltip.close();

  tooltip.open({ greeting });

}

There's a working StackBlitz demo here.

The closeTooltip function simply closes the tooltip:

closeTooltip(tooltip) {

  tooltip.close();

}