2017-01-06 92 views
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() { 

    } 
} 

回答

5

您可以使用data-original-title屬性動態更新您的工具提示。

[attr.data-original-title]="panel.tooltipText" 

Modified Plunker

+0

尼斯,'數據原始title'呵呵... –

+0

非常感謝,工作對我來說就像魅力! – KCarnaille