Chart Tooltip Templates No Longer Support Line Breaks in HTML

2 posts, 1 answers
  1. JohnVS
    JohnVS avatar
    90 posts
    Member since:
    Apr 2013

    Posted 23 Jun Link to this post

    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?

  2. Answer
    Silviya Stoyanova
    Silviya Stoyanova avatar
    66 posts

    Posted 25 Jun Link to this post

    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.
Back to Top