This is a migrated thread and some comments may be shown as answers.

TOOLTIP STATIC POSITION

11 Answers 756 Views
Charts
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 18 Dec 2012, 08:37 PM
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

11 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 19 Dec 2012, 08:00 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 19 Dec 2012, 01:43 PM
THANKSSS
0
David
Top achievements
Rank 1
answered on 19 Dec 2012, 04:34 PM
there was a problem.. this .k-toolTip{//position }, put all tooltips of different charts in my app at this position 
0
David
Top achievements
Rank 1
answered on 19 Dec 2012, 04:35 PM
im trying to do a dashboard so, i have to implement multiples charts in my aspx
0
Accepted
Iliana Dyankova
Telerik team
answered on 20 Dec 2012, 12:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 20 Dec 2012, 01:15 PM
OoOo Thankss :-)
0
David
Top achievements
Rank 1
answered on 20 Dec 2012, 01:18 PM
im newbie in all jajaja, so i continue asking everything :-)
0
Jurgen
Top achievements
Rank 1
answered on 10 Jul 2013, 12:14 PM
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.
0
Iliana Dyankova
Telerik team
answered on 11 Jul 2013, 08:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 29 Sep 2015, 01:06 PM

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.

0
Iliana Dyankova
Telerik team
answered on 01 Oct 2015, 10:48 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
David
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
David
Top achievements
Rank 1
Jurgen
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or