#9083 closed bug (notabug)

Opened February 12, 2013 10:03PM UTC

Closed February 13, 2013 01:14AM UTC

tooltip does not render html (new

Reported by: mmikeyy Owned by:
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:
Description

Problem is between UI 1.9.1 and 1.10.0. All is ok with 1.9.1. Broken with 1.10.0.

I converted most of my tooltips to use the new widget, and all worked well with multi-line content (<br/> inserted here and there).

Now, I upgraded to the latest version of jquery and ui, and tooltip seems to be broken.

Tooltip does NOT work properly when the title attribute of an element includes html (a simple <br/> for example), and the tooltip function is applied globally to the document or part of it:

$('span').tooltip()

or


$('body').tooltip()

If one uses the widget that way, one ends up with html tags showing in the tooltip.

If one however does the following:


 $('span').each(function(){
 $(this).tooltip({content: $(this).attr('title')})
})

then the html in the title attribute will be properly rendered. But this is not a solution as it does not handle any content added to the page after the widget is executed.

An example in the tooltip section shows $('body').tooltip() as a proper way of using the widget. How can that be good if it only works with elements with no html in their title attribute?

Try the following code in a browser to see the problem:

Comment out test2 in the script and uncomment test1 to see that one can still make the tooltip work. It however requires to change program logic everywhere tooltips are used (especially when tooltips are part of html and not added programmatically).

Change ui version to 1.9.1 and all is well.

<! DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>



<script type="text/javascript">
    $(function(){
        /********* test 1: 
        $('span').each(function(){
          $(this).tooltip({
            content: $(this).attr('title')
            })
        })
        
        */
        
        
  //      /********** test 2
        $('body').tooltip()
  //      */
 
 $('<span/>', {title: 'first line<br/>second line', css: {marginTop:20, display:'block' }}).text('Second tooltip (added to body after tooltip widget executed)').appendTo('body')
    })
</script>
		
    </head>
    <body class="yui-skin-sam ">
		
        <span title="3535<br/>34534" >lsjflksajftljshafljsdlfk</span>
    </body>
</html>
Attachments (0)
Change History (1)

Changed February 13, 2013 01:14AM UTC by scottgonzalez comment:1

resolution: → notabug
status: new → closed

http://jqueryui.com/upgrade-guide/1.10/#changed-default-content-option-from-html-to-text