Problems with HTML escaping in Tooltip text

2 posts, 0 answers
  1. Henry
    Henry avatar
    5 posts
    Member since:
    May 2015

    Posted 26 Jun 2015 Link to this post

    I am trying to include some escaped HTML codes in my tooltip text. The text is specified as a title on my DOM element. The text is set in correctly, but the Tooltip code somewhere unescapes the text and converts it back to their actual characters.

        <div data-id="11" title="Test1: The word 'test' should be here in angle brackets: &lt;test&gt;><img src="../content/web/foods/11.jpg" /> </div>

     

    In the Tooltip, I want this to display as literal text (when the browser interprets &lt; and &gt;):

        Test1: The word 'test' should be here in angle brackets: <test>,

    But somewhere along the line, the tooltip is converting &lt; to < and &gt; to >, so then the html looks like <test> (in raw ascii) which gets interpreted by the browser as an unrecognized tag and hidden.

    Here is a snippet example (roll over to see the tooltips):

       http://dojo.telerik.com/@Henry%20Kaufman/EjUQU

    Is there any way to escape the angle brackets so that they pass through the tooltip code without being converted back to literal angle brackets? Or is there an additional attribute or option to tell the Tooltip not to un-escape the title text?

     Thanks!

    -Henry

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 Jun 2015 Link to this post

    Hello Henry,

    In order to achieve the desired behavior, using the sample you have provided, you should modify the template to use a code expression which will encode any html (help article under Rendering HTML-Encoded Values):

    <script id="template" type="text/x-kendo-template">
        <img src="../content/web/foods/200/#=target.data('id')#.jpg" alt="#:target.data('title')#" />
        <p>#:target.data('title')#</p>
    </script>

    Here you can find updated version of the test page.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top