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; 
 
    }