This is a migrated thread and some comments may be shown as answers.

Chart Tooltip Templates No Longer Support Line Breaks in HTML

1 Answer 376 Views
Charts
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 23 Jun 2020, 08:32 PM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Silviya Stoyanova
Telerik team
answered on 25 Jun 2020, 04:09 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Silviya Stoyanova
Telerik team
Share this question
or