tooltip - API Reference - Kendo UI Sparkline

New to Kendo UI for jQuery? Start a free 30-day trial

configuration

The data point tooltip configuration options.

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        background: "lightblue",
        color: "darkblue",
        font: "14px Arial",
        border: {
            color: "blue",
            width: 2
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

tooltip.background

String

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        background: "yellow"
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

tooltip.border

Object

The border configuration options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        border: {
            color: "red",
            width: 3
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

tooltip.color

String

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        color: "white",
        background: "black"
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

tooltip.font

String

The tooltip font.

Default: "12px Arial,Helvetica,sans-serif"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        font: "16px Georgia"
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

tooltip.format

String

The tooltip format.

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

tooltip.padding

Number|Object

The padding of the tooltip.

// 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.shared

Boolean

A value indicating if the tooltip should be shared.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true,
        shared: true
    },
    series: [{
        data: [10, 15, 8, 12]
    }, {
        data: [5, 8, 12, 6]
    }]
});
</script>

tooltip.sharedTemplate

String

The shared tooltip template. Template variables:

points- the category points
category- the category name

<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>

tooltip.template

String|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.

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

tooltip.visible

Boolean

A value indicating if the tooltip should be displayed.

Default: true

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    tooltip: {
        visible: true
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

Related Members