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

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

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';