how to use tooltip in angular 4 with bootstrap tether jquery installed from npm?

Question

Is there any way to use tooltip features from bootstrap 4?

We've already installed bootstrap 4, tether, and jquery using npm install,

and in the documentation we have to write jquery code in javascript,

$(function () [
  $('[data-toggle="tooltip"]').tooltip()
})

and add this code in html,

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

We've tried to add the html code but not working, obviously we have to write the jquery code, but can we write jquery syntax in angular 4 which using typescript? then where to put the syntax in angular 4?

Answer 1

Add jquery, tether and bootstrap scripts to angular-cli.json

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Then go to your desired component. and type declare var $: any;.

import { Component, OnInit } from '@angular/core';

// this line will allow you to use jQuery
declare var $: any;

@Component({
  ...
})

Put your content inside ngOnInit() { /* Content here. */ }.

ngOnInit() {
  $(() => {
    // Testing jQuery
    console.log('hello there!');
  });
}

I prefer not to use jQuery in angular, its not a good practice, try searching for tooltips build on top of angular or use Renderer2 https://angular.io/api/core/Renderer2 or build your own directive for this, Angular Material2 has tooltip component that you might want to use, very easy to implement in typescript.

https://material.angular.io/components/tooltip/overview

For complete docs.

https://github.com/angular/material2

Answer 2

I did it by creating a directive.

import { Directive, OnInit, Inject, ElementRef } from '@angular/core';
import { JQUERY_TOKEN } from './jquery.service';

@Directive({
    selector: '[data-toggle="tooltip"]'
})
export class TooltipDirective implements OnInit {
    private el: HTMLElement;

    constructor(elRef: ElementRef, @Inject(JQUERY_TOKEN) private $: JQueryStatic) {
        this.el = elRef.nativeElement;
    }

    ngOnInit() {
        this.$(this.el).tooltip();
    }
}

This is my jquery.service file mentioned in the import statement

import { InjectionToken } from '@angular/core';

export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jQuery');

Then add to the module

import { NgModule } from '@angular/core';

import { TooltipDirective } from './tooltip.directive';
import { JQUERY_TOKEN } from './jquery.service';

export let jQuery: JQueryStatic = window['jQuery'];

@NgModule({
    imports: [
        // ...
    ],
    declarations: [
        TooltipDirective
    ],
    providers: [
        { provide: JQUERY_TOKEN, useValue: jQuery }
    ]
})
export class MyModule {}

Then simply add it to the component where you need it. For example, in my app.component.ts file, all I had to do is add this one line at the top to get it to work with the template:

import { TooltipDirective } from './tooltip.directive';