在 Angular2 中使用 Bootstrap - 工具提示，工具提示需要通过执行 javascript 来设置，怎么做？

Question

Angular2 (2.0.0-rc.4) I use Bootstrap's Tooltip, Tooltip need execute follow javascript when ready:

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

In Angular2,how to execute it?

Answer 1

That worked for me:

import { Directive, ElementRef, Input, HostListener, OnDestroy } from '@angular/core';

declare var $: any;

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective implements OnDestroy {


  @Input()
  public appTooltip: string;

  constructor(private elementRef: ElementRef) { }

  @HostListener('mouseenter')
  public onMouseEnter(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('show');
  }

  @HostListener('mouseleave')
  public onMouseLeave(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }


ngOnDestroy(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }

}

registering:

1. Importing it in in app.module.ts
2. Adding it in declarations on @NgModule (file app.module.ts)

And using it like this:

<button title="tooltip tilte" [appTooltip]></button>

Answer 2

<div data-toggle="tooltip" #tooltip></div>

class MyComponent {
  @ViewChild('tooltip') tooltip:ElementRef;

  ngAfterViewInit() {
    this.tooltip.nativeElement.tooltip();
  }
}