Why won't the tooltip display correctly when I hover over Kendosparkline?

Question

I created a Kendorsklin chart in a grid, I created two light lines on top of each other, but when I hover over the spark line, the tooltip will not display correctly (Actually, 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 displayed in place and cannot overflow from the grid cell.

This is what we (the Kendo UI user team) are referring to in the next major release.

As a workaround, you can use the following style overrides:

 .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; }