How to initialize Bootstrap tooltips globally in Angular 13 app

I'm working with Bootstrap v5.0 in Angular 13, I tried to implement tooltip using

data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"

This is how I want it

Getting it like this, the title string shows up when the mouse hovers the link

angular.json

  "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/font-awesome/css/font-awesome.css",
      "src/styles.css"
  ],
  "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ]

Update :

If I initialize it in some component, it works for that component. Is there any way I could initialize it globally?

  import {} from "....";
  declare var bootstrap: any;
    
  export class YourComponent implements OnInit {  
       
  ngOnInit(){
      // Bootstrap tooltip initialization
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
      }) 
    }
  }

Thanks! will appreciate any help.