Question

我有一个使用Kendo / Angular2的页面。该页面有很多链接/按钮。当用户单击链接时，需要在单击的链接旁边显示工具提示，并关闭所有先前的实例。工具提示需要使用模板并根据单击的链接显示动态内容。能够在页面上重用单个工具提示控件会很高兴。

是否有可能获得这样的演示？

Answer 1

我使用单个kendo-popup控件作为工具提示。 offset属性允许您定位弹出窗口。偏移量基于打开弹出窗口的click事件的pageX和pageY值

以下是我所拥有的相关摘要：

component.html

＆＃13;

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

＆＃13;

component.ts

＆＃13;

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

＆＃13;

Kendo Angular 2动态工具提示

1 个答案: