剣道角2ダイナミックツールチップ

Question

剣道/角2を使用したページがあります。ページには多くのリンク/ボタンがあります。ユーザーがリンクをクリックすると、クリックされたリンクの横にツールチップが表示され、以前のインスタンスが閉じます。ツールチップはテンプレートを使用し、クリックされたリンクに基づいて動的コンテンツを表示する必要があります。ページ上で単一のツールヒントコントロールを再利用できるのはうれしいことです。

このようなものをデモできますか？

Answer 1

私は、ツールチップとして単一の剣ポップアップコントロールを使用しています。 offsetプロパティを使うと、ポップアップの位置を決めることができます。ポップアップを開くクリックイベントの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>

構成要素.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; 
 
    }