Why won't the Tooltip appear correctly when i hover the mouse over the Kendosparkline?

Question

I created Kendosparkline chart in a grid , I created two sparklines over each other, but when i hover the mouse over the sparkline , the tooltip won't appear correctly (In fact the tooltip appears but it is unreadable and messy)

jsfiddle code

      $("#sparkline").kendoSparkline({
            type: "area",

            series: [{
                name: "World",
                data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],
                field: "Rain",
            }, {
                name: 'New York',
                data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
                field: "Rain",
            }],


        });

thank you

Answer 1

The sparkline tooltip is rendered in-place and can't overflow out of the grid cell.

This is something that we (the Kendo UI team) are looking to address in the next major release.

You can use the following style overrides as a workaround:

.k-sparkline .k-tooltip table {
    table-layout: auto;
    width: auto;
}

.k-sparkline .k-tooltip table td {
    border-left-width: auto;
    text-overflow: clip;
}

.k-sparkline .k-tooltip table td,
.k-sparkline .k-tooltip table th {
    border-width: 0;
}

.k-grid td {
    overflow: visible !important;
}

.k-grid-content {
    overflow: visible !important;
}