How to use tool tip with custom html template and also be able to show/hide them in code ?

[GurpreetSingh5]

Expected behavior

Ability to use custom HTML, but also be able to manually hide/show tool-tip through component ts code So something like the combination of these two : and

Actual behavior

Not able to use these two together. There is no directive with "exportAs" set to "mdbTooltip"

Working environment and MDB version information

OS : Windows 10 MDB Version : 8.1.1

[idzark]

You need to use ViewChild decorator to get access to the tooltip methods. Here is an example:

HTML:

<ng-template #popTemplate> <div [innerHtml]="html"></div></ng-template>
<button
  #tooltip
  type="button"
  mdbBtn
  color="primary"
  class="waves-light"
  [mdbTooltip]="popTemplate"
  mdbWavesEffect
>
  Tooltip with html
</button>

<button mdbBtn color="primary" (click)="open()">Open tooltip</button>
<button mdbBtn color="secondary" (click)="close()">Close tooltip</button>

TS:

import { Component, ViewChild } from '@angular/core';
import { TooltipDirective } from 'angular-bootstrap-md';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('tooltip', { static: true, read: TooltipDirective }) tooltip: TooltipDirective;
  html = '<span><i>Tooltip</i> <u>with</u> <b>HTML</b></span>';

  open() {
    this.tooltip.show();
  }

  close() {
    this.tooltip.hide();
  }
}

[GurpreetSingh5]

Yes. This seems to work. Thanks. Closing this issue.

[GurpreetSingh5]

There are other approaches too though. There is one another approach that worked. HTML:

      <ng-template #popTemplate>
      <div [innerHtml]="html"></div>
      </ng-template>
      <button
         #tooltip="mdb-tooltip"
         type="button"
         mdbBtn
         color="primary"
         class="waves-light"
         [mdbTooltip]="popTemplate"
         mdbWavesEffect
       >
         Tooltip with html
      </button>

TS:

import { Component, ViewChild } from '@angular/core';
import { TooltipDirective } from 'angular-bootstrap-md';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  html = `<span><i>Tooltip</i> <u>with</u> <b>HTML</b></span>
<button mdbBtn color="primary" (click)="tooltip.show()">Open tooltip</button>
<button mdbBtn color="secondary" (click)="tooltip.hide()">Close tooltip</button>`;

}