Kendo Angular 2動態工具提示

Question

我有一個使用Kendo/Angular2的頁面。該頁面有很多鏈接/按鈕。當用戶點擊一個鏈接時，工具提示需要出現在點擊鏈接旁邊，任何以前的實例關閉。工具提示需要使用模板並根據點擊的鏈接顯示動態內容。能夠在頁面上重複使用單個工具提示控件會很好。

是否有可能得到類似這樣的演示？

Answer 1

我正在使用單個kendo-popup控件作爲工具提示。偏移屬性允許您定位彈出窗口。基於打開的彈出窗口中的單擊事件的pageX屬性和pageY值偏移

下面是我有什麼相關的片段：

component.html

<kendo-popup [popupClass]="" *ngIf="tooltipVisible" [offset]="tooltipOffset"> 
 
    <div style="clear: both; padding: 2px;"> 
 
     {{tooltipValue}} 
 
    </div> 
 
</kendo-popup> 
 

 
<button class="btn-link" 
 
    (mouseover)="showTooltip($event,theData)" 
 
    (mouseout)="hideTooltip()" 
 
         style="cursor: pointer; text-decoration: underline;"> 
 
        {{theData}} 
 
</button>

component.ts

tooltipOffset = { left: 0, top: 0 }; 
 
    tooltipVisible = false; 
 
    tooltipValue = ""; 
 

 
    showTooltip(event: any, data: string) { 
 
     this.tooltipOffset = { left: event.pageX + 4, top: event.pageY + 4 }; 
 
     this.tooltipVisible = true; 
 
     this.tooltipValue = data; 
 
    } 
 

 
    hideTooltip() { 
 
     this.tooltipVisible = false; 
 
    }