Angular 5 + Bootstrap Tooltip Not Working

You can use ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Import NgbModule in your app module

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

 imports: [
    NgbModule.forRoot(),
  ],

HTML:

 <button class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip Text..!!">

So, there are a few things that I had to do to get this to work properly.

Angular.JSON (Angular 6)

In this file, it is necessary to put in the Javascript and CSS links for bootstrap. The file used to be known as .angular-cli.json for previous versions, and it's one level deeper, so if you have that file, you'll need to make it ../node_modules. In any case, you'll have something like the following:

  "styles": [
   "src/styles.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/tether/dist/js/popper.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

This will load the appropriate CSS and Javascript into your webpack, so that it will be globally accessible. It's very important to load them in the correct order, as shown. Variations will fail. More detailed instructions can be found here.

*.component.ts

Within each of your components, to use the $ operator, all you have to do is, at the top of the file, type

declare var $;

That's it. You won't get autocomplete, but the application will function when it's compiled.

Working with other JS Libraries

This also applies to, for example, lodash (the _ operator) and many other Javascript libraries. It's also possible with many libraries to use, for example,

import * as $ from 'jquery' - however, for some reason, I have not found that to be reliable with the jquery library itself. It has worked for many others, including moment.js and shortid.