검도 각도 2 동적 툴팁

Question

검도/각도 2를 사용하는 페이지가 있습니다. 페이지에 많은 링크/버튼이 있습니다. 사용자가 링크를 클릭하면 클릭 한 링크 옆에 툴팁이 나타나야하며 이전 인스턴스가 닫힙니다. 툴팁은 템플릿을 사용하고 클릭 한 링크를 기반으로 동적 컨텐트를 표시해야합니다. 페이지에서 하나의 툴팁 컨트롤을 재사용하는 것이 좋을 것입니다.

이런 종류의 데모를 구할 수 있습니까?

Answer 1

하나의 검도 팝업 컨트롤을 툴팁으로 사용하고 있습니다. offset 속성을 사용하면 팝업의 위치를 ​​지정할 수 있습니다. 다음은 팝업을 여는 클릭 이벤트 페이지 X 및 페이지 Y 값을 기준으로 오프셋 여기

내가 가진 것과 관련 조각입니다

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