tooltipObject

The data point tooltip configuration options.

tooltip.backgroundString

The background color of the tooltip. The default is determined from the series color.

tooltip.borderObject

The border configuration options.

tooltip.border.colorString(default: "black")

The color of the border.

tooltip.border.widthNumber(default: 0)

The width of the border.

tooltip.colorString

The text color of the tooltip. The default is the same as the series labels color.

tooltip.fontString(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

tooltip.formatString

The tooltip format.

Example

js
//sets format of the tooltip
format: "C"

tooltip.paddingNumber|Object

The padding of the tooltip.

Example

js
// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }

tooltip.templateString|Function

The tooltip template. Template variables:

  • value- the point value
  • category- the category name
  • series- the data series
  • dataItem- the original data item used to construct the point. Will be null if binding to array.

Example

js
$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     tooltip: {
         template: "#= value #"
     }
});

tooltip.visibleBoolean(default: true)

A value indicating if the tooltip should be displayed.

tooltip.sharedBoolean(default: false)

A value indicating if the tooltip should be shared.

tooltip.sharedTemplateString

The shared tooltip template. Template variables:

  • points- the category points
  • category- the category name

Example

<div id="sparkline"></div>

<script>
$("#sparkline").kendoSparkline({
  	chartArea: {
      width: 300,
      height: 200
    },
    type: "bar",
  	categoryAxis: {
      categories: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014]
    },
  	seriesDefaults: {
      data: [
        16, 17, 18, 19, 20, 21, 21, 22, 23, 22
    	],
      name: "value"
    },
    tooltip: {
        shared: true,
			  sharedTemplate: "#= category # </br>" +
				"# for (var i = 0; i < points.length; i++) { #" +
				    "#= points[i].series.name #: #= points[i].value # </br>" +
				"# } #"
    }
});
</script>