Configuration tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about a widget when it is hovered over. You can enable or disable a tooltip, change its default appearance and format or customize the displayed text using the options of the tooltip configuration object.

NOTE: A tooltip is displayed outside the widget's container. If you plan to use the tooltip, make sure there is enough space around your widget to display it. For example, you can apply a margin to the widget's container to reserve the area around the widget for the tooltip.

Show Example:
jQuery

In this example, several tooltip options are altered. The tooltip is colored in 'lavender' using the tooltip's color option. In addition, the tooltip text is painted blue and displayed with a size of 12.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        type: 'bar',
        barPositiveColor: 'powderblue',
        showFirstLast: false,
        tooltip: {
            color: 'lavender',
            font: {
                color: 'blue',
                size: 10
            }
        }
    });
})

arrowLength

Specifies the length of the tooltip's arrow in pixels.

Type: Number
Default Value: 10

Show Example:
jQuery

In this example, a tooltip has a 5-pixel arrow.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
];

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        type: 'steparea',
        lineColor: 'orchid',
        tooltip: {
            arrowLength: 5
        }
    });
});

border

Specifies the appearance of the tooltip's border.

Type: Object

Show Example:
jQuery

In this example, several options of the tooltip's border are changed.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
];

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        type: 'steparea',
        lineColor: 'plum',
        tooltip: {
            border: {
                opacity: 0.8,
                width: 2,
                color: 'orchid'
            }
        }
    });
});

color

Specifies a color for the tooltip.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the tooltip is colored in 'lightgray' using the color option.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        lineColor: 'midnightblue',
        type: 'spline',
        tooltip: {
            color: 'lightgray'
        }
    });
})

customizeText

Deprecated

Use the customizeTooltip option instead.

Specifies a callback function that returns the text to be displayed by the tooltip.

Type: function

When implementing a callback function for this option, you can access different types of values indicated by a sparkline. To learn how to do this, refer to the customizeTooltip option description.

customizeTooltip

Allows you to change the appearance of particular tooltips.

Type: function(pointsInfo)
Function parameters:
pointsInfo: Object
Defines different types of values indicated by a sparkline.
Return Value: Object
Specifies the text to be displayed in a tooltip and a color for the tooltip.

This option should be assigned a function returning a specific object. The following fields can be specified in this object.

  • color
    Specifies the color of a tooltip.

  • text
    Specifies the text displayed by a tooltip.

When implementing a callback function for this option, you can access different types of values indicated by a sparkline. For this purpose, use the following fields of the this object.

  • originalFirstValue
    Contains the first value of a sparkline as it is specified in a data source.
  • firstValue
    Contains the first value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalLastValue
    Contains the last value of a sparkline as it is specified in a data source.
  • lastValue
    Contains the last value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalMinValue
    Contains the minimum value of a sparkline as it is specified in a data source.
  • minValue
    Contains the minimum value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalMaxValue
    Contains the maximum value of a sparkline as it is specified in a data source.
  • maxValue
    Contains the maximum value of a sparkline with applied formatting if the format and precision (optional) options are specified.

The following fields are available for a sparkline of the 'winloss' type only.

  • originalThresholdValue
    Contains the threshold value of a winloss sparkline as it is assigned to the winlossThreshold option.
  • thresholdValue
    Contains the threshold value of a winloss sparkline with applied formatting if the format and precision (optional) options are specified.

To access the fields above, you can use the function's parameter as well as the this object.

To get general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, text displayed by a tooltip is customized using the customizeText option.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:90px"></div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 }
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        tooltip: {
            format: 'fixedPoint',
            precision: 1,
            customizeTooltip: function (sparkline) {
                return {
                    text: 'Min: ' + sparkline.minValue + '<br />Max: ' + sparkline.maxValue
                };
            }
        }
    });
});

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to enable/disable the tooltip. Hover over the sparkline to see the changes.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:90px"></div>
<div id="checkboxContainer" style="height:20px;max-width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="enableTooltipCheckbox" checked> Enable the Tooltip
</div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 },
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        showFirstLast: false,
        tooltip: {
            enabled: true
        }
    });

    $('#enableTooltipCheckbox').change(function () {
        var sparkline = $('#sparklineContainer').dxSparkline('instance');
        sparkline.option({
            tooltip: { enabled: this.checked }
        });
    });
});

font

Specifies font options for the text displayed by the tooltip.

Type: Object

Show Example:
jQuery

In this example, several font options of the tooltip text are changed.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        type: 'area',
        lineColor: 'indianred',
        showFirstLast: false,
        tooltip: {
            font: {
                color: 'lemonchiffon',
                size: 10,
                family: 'Zapf-Chancery, cursive',
                opacity: 0.7,
                weight: 700
            }
        }
    });
})

format

Specifies a format for the text displayed by the tooltip.

Type: String
Default Value: ''
Accepted Values: 'currency' | 'fixedPoint' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions'

By default, the tooltip displays the main and target values combined. You can apply formatting to both of these values using one of the available formats. In addition, you can specify a precision for the main and target values displayed by a tooltip using the precision option.

For details on formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, the sparkline values are displayed in the 'fixedPoint' format with a precision of 2.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:90px"></div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 },
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        showFirstLast: false,
        tooltip: {
            format: 'fixedPoint',
            precision: 1
        }
    });
});

horizontalAlignment

Specifies how a tooltip is horizontally aligned relative to the graph.

Type: String
Default Value: 'center'
Accepted Values: 'left' | 'center' | 'right'

Show Example:
jQuery

Use the drop-down menu below to alter the tooltip | horizontalAlignment option. Hover over the sparkline to see the changes.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:90px"></div>
<div id="selectContainer" style="height:25px;max-width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Tooltip Horizontal Alignment:
    <select id="dropdownListSelector">
        <option value="left">left</option>
        <option value="center">center</option>
        <option value="right">right</option>
    </select>
</div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 },
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        showFirstLast: false,
        tooltip: {
            horizontalAlignment: 'left'
        }
    });

    $('#dropdownListSelector').change(function () {
        var sparkline = $('#sparklineContainer').dxSparkline('instance');
        sparkline.option({
            tooltip: { horizontalAlignment: this.value }
        });
    });
});

opacity

Specifies the opacity of a tooltip.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, a tooltip is displayed with a 0.45 opacity.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
];

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        type: 'steparea',
        lineColor: 'steelblue',
        tooltip: {
            opacity: 0.45
        }
    });
});

paddingLeftRight

Specifies a distance from the tooltip's left/right boundaries to the inner text in pixels.

Type: Number
Default Value: 18

TooltipPadding ChartJS

paddingTopBottom

Specifies a distance from the tooltip's top/bottom boundaries to the inner text in pixels.

Type: Number
Default Value: 15

TooltipPadding ChartJS

precision

Specifies a precision for formatted values displayed by the tooltip.

Type: Number
Default Value: 0

This option accepts an integer number indicating how many digits to show in the values displayed by a tooltip. To learn how to set a format for these values, refer to the format option description. For general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, the sparkline values are displayed in the 'fixedPoint' format with a precision of 2.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:90px"></div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 },
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        showFirstLast: false,
        tooltip: {
            format: 'fixedPoint',
            precision: 1
        }
    });
});

shadow

Specifies options of the tooltip's shadow.

Type: Object

verticalAlignment

Specifies how a tooltip is vertically aligned relative to the graph.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'bottom'

Show Example:
jQuery

Use the drop-down menu below to alter the tooltip | verticalAlignment option. Hover over the sparkline to see the changes.

<div id="sparklineContainer" style="height:100px; max-width:400px; margin: 0 auto;margin-top:55px; margin-bottom:55px"></div>
<div id="selectContainer" style="height:25px;max-width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Tooltip Vertical Alignment:
    <select id="dropdownListSelector">
        <option value="top">top</option>
        <option value="bottom">bottom</option>
    </select>
</div>
var volumeChanges = [
    { date: new Date(2013, 10, 1), volume: -3.12 },
    { date: new Date(2013, 10, 2), volume: 10.23 },
    { date: new Date(2013, 10, 3), volume: -8.24 },
    { date: new Date(2013, 10, 4), volume: -5.7 },
    { date: new Date(2013, 10, 7), volume: 2.06 },
    { date: new Date(2013, 10, 8), volume: 5.95 },
    { date: new Date(2013, 10, 9), volume: -5.14 },
    { date: new Date(2013, 10, 10), volume: 7 },
    { date: new Date(2013, 10, 11), volume: -12.85 },
    { date: new Date(2013, 10, 14), volume: -2.27 },
    { date: new Date(2013, 10, 15), volume: 19.85 },
    { date: new Date(2013, 10, 16), volume: -12 },
    { date: new Date(2013, 10, 17), volume: -3.75 },
    { date: new Date(2013, 10, 18), volume: 10.45 },
    { date: new Date(2013, 10, 21), volume: -14.4 },
    { date: new Date(2013, 10, 22), volume: 13 },
    { date: new Date(2013, 10, 23), volume: 18.16 },
    { date: new Date(2013, 10, 24), volume: -5.39 },
    { date: new Date(2013, 10, 25), volume: 60.28 },
    { date: new Date(2013, 10, 28), volume: -75.11 },
    { date: new Date(2013, 10, 29), volume: -6.68 },
    { date: new Date(2013, 10, 30), volume: 5.3 },
    { date: new Date(2013, 10, 31), volume: 4.69 },
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: volumeChanges,
        argumentField: 'date',
        valueField: 'volume',
        type: 'bar',
        showFirstLast: false,
        tooltip: {
            verticalAlignment: 'top'
        }
    });

    $('#dropdownListSelector').change(function () {
        var sparkline = $('#sparklineContainer').dxSparkline('instance');
        sparkline.option({
            tooltip: { verticalAlignment: this.value }
        });
    });
});