剣道チャートツールチッププロットエリアのカスタムポジション

Question

剣道UIチャートのツールチップをプロットエリアのカスタムポジションに配置したいとします。 kendo-chart-tooltipパディングプロパティを使用すると、ツールヒントの内容にのみ影響します（plunkerを参照）。 plotAreaHoverイベントに設定することで、チャートに対する相対的なヒントの位置を設定したいと思いますか？ here is an image of what I need

<kendo-chart [categoryAxis]="{ categories: categories }" (plotAreaHover)="onPlotAreaHover($event)"> 
    <kendo-chart-title text="GDP annual %"></kendo-chart-title> 
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend> 
    <kendo-chart-tooltip [shared]="true" format="{0}%" [padding]="tooltipPadding"></kendo-chart-tooltip> 
    <kendo-chart-series> 
     <kendo-chart-series-item *ngFor="let item of series" 
     type="line" style="smooth" [data]="item.data" [name]="item.name"> 
     </kendo-chart-series-item> 
    </kendo-chart-series> 
</kendo-chart> 

Answer 1

あなたは構築し、位置あなた自身のツールチップするseriesHoverイベントを使用することができます。カスタムツールチップのための

seriesHover: function(e){ 
     var $pos = $("#chart").offset() //position of chart 
     var positionX = $pos.left + 30, 
      positionY = $pos.top + 2, 
      di = e.dataItem; 
     // Build tooltip HTML  
     var html = '<div><strong>' + di.cat + '</strong></div>'; 
     html += '<table><tr>'; 
     html += '<td>India</td><td>' + di.India + '</td>'; 
     html += '</tr><tr>'; 
     html += '<td>Russian Federation</td><td>' + di.RF + '</td>'; 
     html += '</tr><table>'; 
     //Show and position the tooltip with the html content      
     $("#customTooltip").show().css("top", positionY).css("left", positionX).html(html); 
    } 

例のCSS：

#customTooltip { 
    display: none; 
    position: absolute; 
    background: #eee; 
    border-radius: 5px; 
    height: auto; 
    width: auto; 
    border: 1px solid #999; 
    padding: 10px; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.19), 0 3px 6px rgba(0,0,0,0.23); 
    } 

は私の質問に答えtelerik からDEMO

Answer 2

みんなの作業は：

このシナリオは外のサポートされていません。あなたはadditを使ってそれを達成することができますイオン性CSS。例として：ここ

.k-chart-tooltip-wrapper .k-animation-container { 
    position: absolute !important; 
    top: 0 !important; 
} 

はデモplunker