11 Answers, 1 is accepted
0
Accepted
Hi David,
This can be achieved using the following approach:
the Telerik team
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 Nikolovathe 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
Hello David,
You could specify the tooltip position for each chart as specify its ID. I.e.:
If you are not familiar with CSS specificity I recommend reading this article in Smashing Magazine.
Kind regards,
Iliana Nikolova
the Telerik team
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.
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
Hi Jurgen,
Let me know if this helps.
Regards,
Iliana Nikolova
Telerik
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>
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
Hi David,
In the current Kendo UI Chart you could set custom position to the .k-chart-tooltip element. For example:
Regards,
Iliana Nikolova
Telerik
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!