Chart Tooltip Templates No Longer Support Line Breaks in HTML

[JohnVS]

Previously, we used either <br> tags or <div> tags to make multi-line tooltips, to have like a title on the first line, then additional items below (see this Dojo targeting an older version of Kendo where it worked fine). Note that "Test" is correctly in italics and is a line down from the rest of the tooltip.

But if you change the Kendo version to a more recent version, like 2020.2.617 (see this Dojo), the "Test" text is now beside the other text, not below as it should be.

I did notice that there is now a CSS rule for .k-tooltip that sets display: inline-flex, where there used to be no setting of the display attribute, and therefore the .k-tooltip element used to be the default of block.

Why did this change to "inline-flex" happen? And to get back previous behavior, do I really need to override .k-tooltip display back to block? What ramifications will that have?

[Silviya Stoyanova]

Hello John,

Thank you for your time to prepare both examples.

In order to keep the tooltip multi-line possible, I would suggest wrapping the tooltip template in a <div>

tooltip: {
         visible: true,
         template: "<div><b>${category}</b> - ${value}<br><i>Test</i></div>"
     }

Kind Regards,
Silviya Stoyanova
Progress Telerik