TOOLTIP STATIC POSITION

[David]

I need that the tooltip, appear in one position of the chart, in the chart or outside it
someone can do this in any moment

[Iliana Nikolova]

Hi David,

This can be achieved using the following approach: 

• Set visible: false to the default tooltip in Kendo UI Chart;
• In the seriesHover event call a function which sets the tooltip with a custom position.

• <script>
  $("#chart").kendoChart({
    //....
     tooltip: {
        visible: false
     },
     seriesHover: showTooltip
  });
  
  var showTooltip = function(e) {$("#chart .k-tooltip").html(e.value).show();
  }
  </script>
  
  <style>
  .k-tooltip{
     //custom position
  }​
  </style>

Regards,

Iliana Nikolova
the Telerik team

[David]

THANKSSS

[David]

there was a problem.. this .k-toolTip{//position }, put all tooltips of different charts in my app at this position 

[David]

im trying to do a dashboard so, i have to implement multiples charts in my aspx

[Iliana Nikolova]

Hello David,

You could specify the tooltip position for each chart as specify its ID. I.e.: 

<style>
#chart1 .k-tooltip{
   //custom position
}​

#chart2 .k-tooltip{
   //custom position
}​

#chart3 .k-tooltip{
   //custom position
}​

....
</style>

If you are not familiar with CSS specificity I recommend reading this article in Smashing Magazine.

Kind regards,
Iliana Nikolova
the Telerik team

[David]

OoOo Thankss :-)

[David]

im newbie in all jajaja, so i continue asking everything :-)

[Jurgen]

Works fine, 1 question still. How can I get the percentage value of the donut part I'm hovering over from the showTooltip function?
With the standard MVC code it's like: .Template("#= kendo.format('{0:P0}', percentage) #" + " score " + "#= category #")
But I can't get the percentage in the showTooltip function.

[Iliana Nikolova]

Hi Jurgen,

In order to achieve this you could define the format in the Chart's configuration. For example:

@(Html.Kendo().Chart(Model)
  //....
  .Tooltip(t => t.Visible(false).Format("{0:P0}%"))
  .Events(ev => ev.SeriesHover("showTooltip"))
)

<script>
  function showTooltip(e) { $("#chart .k-tooltip").html(kendo.format(e.series.tooltip.format, e.value) + " - " + e.category).show(); }
</script>

Let me know if this helps. 

Regards,
Iliana Nikolova
Telerik

[David]

The CSS for a specific tooltip is no longer valid because the DIV that gets created for the tooltip is outside of the container now.

[Iliana Nikolova]

Hi David,

In the current Kendo UI Chart you could set custom position to the .k-chart-tooltip element. For example: 

.k-chart-tooltip {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
}

Regards,
Iliana Nikolova
Telerik