DataGrid and datalist cannot be used in tooltip

[officecode]

The data in the following code cannot be displayed. Ask for help. Thanks！

Code:

onLoadSuccess:function(data){
	$('.img').tooltip({
		content: function(){return $('<div></div>')},
		position: 'right',
		onUpdate:function(content){
			content.datalist({
				title:'datalist',
				iconCls:'icon-tip',
				width: 278,
				height:120,
				lines:true,
				data:[
					{title:'aaa'}
				],
				textField:'title'
			});
		}
	});
},

[officecode]

After testing, if I change the URL attribute in datalist, the data can be obtained, but cannot be displayed in the datalist.
Does tooltip not support this type of writing? Is there anything else that can be used to display DataGrid data in tooltip?
This problem has been bothering me for a long time.

[jarry]

You should resize the datalist after display the tooltip dialog.

Code:

onUpdate: function(content){
	content.datalist({
		title:'datalist',
		iconCls:'icon-tip',
		width: 278,
		height:120,
		lines:true,
		data:[
			{title:'aaa'}
		],
		textField:'title'
	});
},
onShow: function(){
	var opts = $(this).tooltip('options');
	$(opts.content).datalist('resize');
}

[officecode]

Thanks for your reply.
After adding the onShow event, datalist still does not display the data.

You should resize the datalist after display the tooltip dialog.

Code:

onUpdate: function(content){
	content.datalist({
		title:'datalist',
		iconCls:'icon-tip',
		width: 278,
		height:120,
		lines:true,
		data:[
			{title:'aaa'}
		],
		textField:'title'
	});
},
onShow: function(){
	var opts = $(this).tooltip('options');
	$(opts.content).datalist('resize');
}

[jarry]

Please look at this example http://code.reloado.com/inodal/edit#javascript,html,live

[officecode]

Please look at this example http://code.reloado.com/inodal/edit#javascript,html,live

Appreciated your great help,Dear ...I find the root cause that the property should be "content: $('<div></div>'),"
But I'm confused still that,tooltip can't be displayed from the second row of datagrid..

Code:

	<table id="dd"></table>
	<script>
		$(function(){
			$('#dd').datagrid({
				title:'datagrid',
				width:300,
				data:[
					{id:1,name:'abc1',age:28},
					{id:2,name:'abc2',age:28},
					{id:3,name:'abc3',age:28},
					{id:4,name:'abc4',age:28},
					{id:5,name:'abc5',age:28},
				],
				columns:[[
					{field:'id',title:'id'},
					{field:'name',title:'name',formatter:function(val,row){
						return '<a class="con" href="javascript:void(0)">'+val+'</a>';
					}},
					{field:'age',title:'age'}
				]],
				onLoadSuccess:function(){
					$('.con').tooltip({
						content: $('<div></div>'),
						onUpdate: function(content){
							content.datalist({
								title:'datalist',
								iconCls:'icon-tip',
								width: 278,
								height:120,
								lines:true,
								data:[
									{title:'aaa'}
								],
								textField:'title'
							});
						},
						onShow: function(){
							var opts = $(this).tooltip('options');
							$(opts.content).datalist('resize');
						}
					});
				}
			});
		});
	</script>

[jarry]

Please use this code instead.

Code:

onLoadSuccess:function(){
  $('.con').each(function(){
    $(this).tooltip({
      content: $('<div></div>'),
      onUpdate: function(content){
        content.datalist({
          title:'datalist',
          iconCls:'icon-tip',
          width: 278,
          height:120,
          lines:true,
          data:[
            {title:'aaa'}
          ],
          textField:'title'
        });
      },
      onShow: function(){
        var opts = $(this).tooltip('options');
        $(opts.content).datalist('resize');
      }
    })
  })
}

[officecode]

The problem has been solved. Thank you very much!