CODEWITHSUNDEEP
jqueryangularjskendo-uikendo-tooltip
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Kendo-ui tooltip in Angularjs

I wrote a simple kendo-ui app, which displays a pie chart from JSON. I used AngularJS and i couldn't find a reference on how to display a tooltip when the user hovers on the chart.

Coding snippet:

<div kendo-chart
                 k-title="{ text: 'DemoProg', position: 'bottom' }"
                 k-series-defaults="{ type: 'pie' }"
                 k-series="[{
                                field: 'solar',
                                categoryField: 'year',
                                padding: 0
                              }]"
                 k-data-source="yearSource"
                 k-series-hover="onSeriesHover"
                 ></div>

and i also found out in the official tutorial page, we can show the tooltip by setting it's visibility to true but it's in jQuery.

tooltip: {
                    visible: true,
                    format: "{0}%"
                }

My question is how can we show a tooltip in angularjs? Any help would be appreciated. Thank you.

Upvotes: 0

Views: 2775

Answers (1)

Fals
Fals

Reputation: 6839

Just add the k-tooltip attribute:

<div kendo-chart
             k-title="{ text: 'DemoProg', position: 'bottom' }"
             k-series-defaults="{ type: 'pie' }"
             k-series="[{
                            field: 'solar',
                            categoryField: 'year',
                            padding: 0
                          }]"
             k-data-source="yearSource"
             k-series-hover="onSeriesHover"
             k-tooltip="{visible: true, format: '{0}%'}">
</div>

Upvotes: 3

Related Questions