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

问题描述 投票:2回答:2

Angular2(2.0.0-rc.4)我使用Bootstrap的工具提示,工具提示需要在准备好后执行跟随javascript:

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

在Angular2中,如何执行它?

javascript twitter-bootstrap angular
2个回答
1
投票
<div data-toggle="tooltip" #tooltip></div>
class MyComponent {
  @ViewChild('tooltip') tooltip:ElementRef;

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

1
投票

这对我有用:

import { Directive, ElementRef, AfterViewInit, Input, HostListener } 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');
  }

}

注册:

  1. 在app.module.ts中导入它
  2. 在@NgModule的声明中添加它(文件app.module.ts)

并使用它像这样:

<button title="tooltip tilte" [appTooltip]></button>
© www.soinside.com 2019 - 2024. All rights reserved.