EasyUI Forum

Hi,
I saw a nice tip on how to add tooltip on cells on the forum:
var cells = $(datagridId).datagrid('getPanel').find('div.datagrid-body td[field] div.datagrid-cell');
cells.tooltip({   
     content: function() {
   
                console.log(this);
                var tp = $(this).html();
                return tp;
     } 
 });
But  I need to show a tooltip on some of my datagrid cell and the content of the tooltip depends on the cell column, the cell value and some other attributes of the row. And I don't think I can easily find those attributes from the html component.

So I tried to add the tooltip during the formatting of the cell:
column = {field:property,title:property,width:100,sortable:true,formatter:function(value,row,index){
 
        var tooltipStrValue = getTooltip(value,row,index,this.field);
       return '<span title='+tooltipStrValue+' class=\"easyui-tooltip\">' + value + '</span>';
      
      }};

But when I do this the tooltip appears sometimes but not everytimes, the behavior is very strange.
Also, How can I set the showDelay, and set a more complex content (Ideally I would like to show some form in a panel ).
I try to set the tooltip using ${this).tooltip in the formatter, but that does not work.. Not sure how I can access the content of a particular cell and attach a tooltip programmatically, and in the same time retrieve the information necesary to build the tooltip..

Thanks in advance.

Melanie

When loaded data successfully, you need to create tooltip object manually.

Hi Thanks for the tip, I wil try that.
How do I do to specify a more complex content, say I want the content to be a form, I have to set it at the cell level, so was thinking in the formatter,, because this is where I have the proper information. I can not really do this in the loadSucess as I will loose the cell context informations..

Just to add some specificities, my tooltip is quite long and shows a liste of additional values, so I want to format them nicely and show them in a panel, just like what you show on your demo of the AJAX tooltip, except that instead of loading the tooltip content from an url, I want to programmatically set it up. I must have messed up, because whenever I set <div> <ul><li>content1</li><li>....</ul></div> to my tooltip, it does not show anything in the tooltip..

What I am currently doing is the following:
In the cell formatter :
column = {field:property,title:property,width:100,sortable:true,formatter:function(value,row,index){
...
 return '<div data-p1='+index+' data-p2='+gridName+' data-p3='+tooltipProperty+' class=\"easyui-tooltip\" >' + value + '</div>';
}

then  upon datagrid loading:
$('#dg).datagrid('getPanel').find('.easyui-tooltip').each(function() {

          var index = $(this)[0].getAttribute('data-p1');
           var gridName= $(this)[0].getAttribute('data-p2');
            var property= $(this)[0].getAttribute('data-p3');
            var tooltipExtendedContent= getContent(index,gridName,columnName);
         
                           
                               $(this).tooltip({
                                content: $('<div></div>'),
                                onShow: function(){
                                $(this).tooltip('arrow').css('left', 20);
                                $(this).tooltip('tip').css('left', $(this).offset().left);
                                },
                                onUpdate: function(cc){
                                cc.panel({
                                width: 500,
                                height: 'auto',
                                border: false,
                                content:tooltipExtendedContent
                                });},
                               // showDelay: 500,
                                position: 'right'
     
                           });
                         
                            });

But that does not work.. not sure why, is this the correct way to do this ?

Thanks

Please refer to http://jsfiddle.net/F4sEX/.

Works nicely, thanks !!