![](/img/trans.png)
[英]How can I add a tooltip/popover to table data using Angular2 and Bootstrap?
[英]In Angular2 With Bootstrap - Tooltip, Tooltip Need setup by executing javascript, How to do it?
Angular2 (2.0.0-rc.4) 我使用 Bootstrap 的 Tooltip,Tooltip 需要在准備好后執行 follow javascript:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
在 Angular2 中,如何執行它?
這對我有用:
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');
}
}
注冊:
並像這樣使用它:
<button title="tooltip tilte" [appTooltip]></button>
<div data-toggle="tooltip" #tooltip></div>
class MyComponent {
@ViewChild('tooltip') tooltip:ElementRef;
ngAfterViewInit() {
this.tooltip.nativeElement.tooltip();
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.