tooltip on datagrid cell

[melane]

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

[stworthy]

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

Code:

$('#dg').datagrid({
  onLoadSuccess:function(){
    $(this).datagrid('getPanel').find('.easyui-tooltip').tooltip({
      showDelay: 500
      //...
    });
  }
});

[melane]

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..

[melane]

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

[stworthy]

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

[melane]

Works nicely, thanks !!