tooltip 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 the color of the tooltip's border.

Type: String
Default Value: '#d3d3d3'

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's border is colored in 'forestgreen'.

<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: 'mediumspringgreen',
        tooltip: {
            border: {
                color: 'forestgreen'
            }
        }
    });
});

dashStyle

Specifies the dash style of the tooltip's border.

Type: String
Default Value: 'solid'
Accepted Values: 'solid'|'longDash'|'dash'|'dot'

The following values are available.

  • solid
    Displays a solid, continuous line.
  • longDash
    Displays a border using long dashes.
  • dash
    Displays a border using dashes.
  • dot
    Displays a border using dots.
  • Any combination of 'longDash', 'dash' and 'dot'
    Displays a border by repeating the specified combination. For instance, 'dashdotdash'.
Show Example:
jQuery

In this example, the tooltip's border has the 'longDash' dash style.

<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: 'cornflowerblue',
        tooltip: {
            border: {
                color: 'purple',
                dashStyle: 'longDash'
            }
        }
    });
});

opacity

Specifies the opacity of the tooltip's border.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the tooltip's border is displayed with a 0.5 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: 'lightpink',
        tooltip: {
            border: {
                color: 'violet',
                opacity: 0.5
            }
        }
    });
});

visible

Specifies whether the tooltip's border is visible or not.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to show/hide the tooltip's border. Hover over the sparkline to see the changes.

<div id="sparklineContainer" style="height:50px;max-width:200px;margin: 0 auto;margin-top:90px"></div>
<div id="checkboxContainer" style="height:20px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="showTooltipBorderCheckbox" checked> Show the Tooltip's Border
</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: 'deepskyblue',
        tooltip: {
            border: {
                visible: true,
                color: 'blue'
            }
        }
    });

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

width

Specifies the width of the tooltip's border in pixels.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, a tooltip has a 4-pixel border.

<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',
        tooltip: {
            border: {
                width: 4
            }
        }
    });
});