tooltip.html

<button type="button" class="btn btn-secondary" placement="top" ngbTooltip="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" placement="right" ngbTooltip="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" placement="left" ngbTooltip="Tooltip on left">
    Tooltip on left
  </button>
  <hr>
  <p>
    You can easily override open and close triggers by specifying event names (separated by <code>:</code>) in the <code>triggers</code> property.
  </p>

  <button type="button" class="btn btn-secondary" ngbTooltip="You see, I show up on click!" triggers="click:blur">
    Click me!
  </button>

  <hr>
  <p>
    Alternatively you can take full manual control over tooltip opening / closing events.
  </p>

  <button type="button" class="btn btn-secondary" ngbTooltip="What a great tip!" triggers="manual" #t="ngbTooltip" (click)="t.open()">
    Click me to open a tooltip
  </button>
  <button type="button" class="btn btn-secondary" (click)="t.close()">
    Click me to close a tooltip
  </button>