Angular 2 Components

Bootstrap tooltip component

Angular 2's ability to bind to element properties and events without the need for custom directives enables us to integrate with third-party code easily. Bootstrap uses some custom attributes to make the tooltip work. We can use it as is. Open app.component.ts and add the bootstrap attributes to the heading to display a tooltip from the bottom. We also need to leverage the AfterViewInit hook to initialize the tooltip when the template is rendered:

[app.component.ts] import { Component, AfterViewInit } from '@angular/core'; import 'expose?jQuery!jquery'; import 'bootstrap'; import * as $ from 'jquery'; @Component({ selector: 'app-root', template: ` <h1 data-toggle="tooltip" data-placement="bottom" title="A Tooltip on ...