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 the right">Angular2 components</h1>
`
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
$('h1').tooltip();
}
}Now, let's open the browser and test it. Hover over the title and...