1
我正在使用Angular 2和Bootstrap 3 tooltip。我在佈局和主要內容屏幕上有一個側欄。在側欄中,用戶可以更改內容中項目的工具提示文本。更改從Angular 2輸入的引導工具提示文本
雖然因爲工具提示文本沒有更新,所以我的笑話。因此,一個對象通過@Input()
的工具提示文本傳遞到我的內容面板。然後是通過[attr.title]=panel.tooltiptext
綁定的數據。
現在,如果更新工具提示文本,然後將鼠標懸停在文本上,您會看到工具提示文本不是已更新,但保持懸停,您將看到vanilla html標題彈出正確的文本。
Plunker例如
main.component.ts - 這是我的像側杆,它處於比內容面板更高的水平。
@Component({
selector: 'my-app',
template: `
<div>
<h2>{{desc}}</h2>
<tooltip-comp [panel]="panelObj"></tooltip-comp> <br>
<input [(ngModel)]="panelObj.tooltipText" style="width: 250px;" />
</div>
`,
})
export class App implements OnInit {
desc:string = 'Change tooltip text';
panelObj = {
tooltipText: "The Power of the "
};
constructor() {}
ngOnInit() {
}
}
tooltip.component.ts - 這是內容面板獲取與它更新的提示文本的對象。
@Component({
selector: 'tooltip-comp',
template: `
<div>
<a id="blah" href="#" data-toggle="tooltip" [attr.title]="panel.tooltipText">You Don't Know</a> <br><br>
</div>
`,
})
export class TooltipComponent implements OnInit {
@Input() panel: string;
constructor() {}
ngAfterViewInit() {
$('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
}
ngOnInit() {
}
}
尼斯,'數據原始title'呵呵... –
非常感謝,工作對我來說就像魅力! – KCarnaille