Angular 5 + Bootstrap Tooltip Not Working

Question

What am I doing wrong?

I'm trying to get a Bootstrap Tooltip to work in Angular 5. We have the Javascript library set up via the footer of the index.html page, as recommended. The documents on Bootstrap use JQuery to get ahold of the elements, then call the tooltip() function on them.

Thinking I might be able to do the same, but using the getElementById function to obtain a handle on the button, I wrote the following (the button is the item that has a tooltip defined on it):

  ngAfterViewInit(){
    let button = document.getElementById('tooltipBtn');
    button.tooltip();
  }

Template code (separate file):

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="tooltipBtn">
  Tooltip on bottom
</button>

The error I get (in the browser console):

ERROR
Error: button.tooltip is not a function

Solution 1

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.

Solution 2

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..!!">

Comments

[theMayer]

Yes, but if you need jquery for other things in your project, this path does not seem to work (at least, it didn't for me).

[AKJ]

As per latest bootstrap, bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery. You can therefore include single bootstrap.bundle.js alongside jquery.js instead of separate popper.js