How do I initialize mdb tooltips on Angular with Typescript?

Question

I'm using mdb on my angular project and I want to show a tooltip on my password input to show the restriction to the user.

I tried putting data-mdb-toggle="tooltip" and the title next to it in the html input tag but I saw that mdb tooltips have to be initialised. I don't now how to do it with Typescript, here's my .ts file:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})

export class RegisterComponent implements OnInit {

  registerForm!: FormGroup;

  constructor() {}

  ngOnInit(): void {

    this.registerForm = new FormGroup({
      nome: new FormControl(null, Validators.required),
      cognome: new FormControl(null, Validators.required),
      team: new FormControl(null, Validators.required),
      genere: new FormControl(null, Validators.required),
      anno: new FormControl(null, [Validators.required, Validators.max(2005), Validators.min(1964)]),
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required,Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')]),
    })
  }

  onSubmit() {
    console.log(this.registerForm);
  }
}

Answer 1

Install ui kit using this command: npm i mdb-angular-ui-kit

Import MdbTooltipModule into your app.module.ts file like below:

import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';

@NgModule({
  ...
  imports: [
    MdbTooltipModule,
  ]
  ...
})

Make sure you import mdbstylesheet in your stylesheet

// MDB SCSS
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";

Your HTML template code like below:

<a
  mdbTooltip="Tooltip on top"
  placement="top"
>
  Tooltip on top
</a>

Answer 2

Please try below hope this will work for you

Install MDB ANGULAR UI KIT in your project easily type the following command in the terminal:

npm i mdb-angular-ui-kit

then Add imports of individual MDB modules to the app.module.ts to use specific components. For example use tooltip:

import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
…
@NgModule ({
 ...
 imports: [MdbTooltipModule],
 ...
})

Then in html template

<p class="mb-0">
  Hover the link to see the
  <a href="#" mdbTooltip="Hi! I'm tooltip" #tooltip="mdbTooltip">tooltip</a>
</p>