Print Page - [SOLVED] tooltip on datagrid + parameter = problem

Title: [SOLVED] tooltip on datagrid + parameter = problem
Post by: catpaw on November 01, 2016, 12:22:20 PM

Hi all,

I found my response in this post:

http://www.jeasyui.com/forum/index.php?topic=1919.msg4247#msg4247

and it works but I have an issue:

1. For each row in the table the tooltip with ajax content is created.
2. I position the mouse over the cell A, the ajax content is displayed in tooltip, no problem.
3. I position the mouse over the cell B and ajax content is displayed in tooltip, no problem.
4. I position the mouse over the cell A again, the tooltip is empty.
5. I position the mouse over the cell C, the ajax content is displayed in tooltip, no problem.
6. I position the mouse over the cell A and B again, the tooltip is empty.

Here the code:

declare tooltip in the datagrid:

Code:

onLoadSuccess:function(){
  $('.ttp').tooltip({
    content: $('<div></div>'),
    position: 'right',
    hideEvent: 'none',
    onShow: function(){
      var t = $(this);
      t.tooltip('tip').focus().unbind().bind('blur',function(){
        t.tooltip('hide');
      });
    },
    onUpdate:function(content){
      var opts = $(this).tooltip('options');
      var id_ticket = opts.param;
      content.panel({
        width: 600,
        height: 'auto',
        border: false,
        href: 'resume_ticket.php?id_ticket='+id_ticket
      });
    }
  });
}

then in every cell:

Code:

formatter: function(value,row,index){
  return '<a href=\'#\' class=\'ttp\' data-options=\'param:'+row.id_ticket+'\'>'+value+'</a>';
}

what I believe is that once the contents of a cell is requested, is not updated when the content is requested again

appreciate any help

thanks

Title: Re: tooltip on datagrid + parameter = problem
Post by: stworthy on November 01, 2016, 05:57:23 PM

All your tooltip components use the same 'content'. This is why you lose the content when moving the mouse on another cell. To solve this issue, please use this code instead.

Code:

$('.ttp').tooltip({
  content: function(){return $('<div></div>')}
});

Title: Re: tooltip on datagrid + parameter = problem
Post by: catpaw on November 02, 2016, 07:41:19 AM

hi stworthy

I changed my code like you told me

Code:

onLoadSuccess:function(){
  $('.ttp').tooltip({
    content: function(){return '<div></div>'},
    position: 'right',
    hideEvent: 'none',
    onShow: function(){
      var t = $(this);
      t.tooltip('tip').focus().unbind().bind('blur',function(){
        t.tooltip('hide');
      });
    },
    onUpdate:function(content){
      var opts = $(this).tooltip('options');
      var id_ticket = opts.param;
      content.panel({
        width: 600,
        height: 'auto',
        border: false,
        href: 'resume_ticket.php?id_ticket='+id_ticket
      });
    }
  });
}

but I get this error:

Quote

Uncaught TypeError: content.panel is not a function

if I do an alert of content:

alert(JSON.stringify(content));

with content: function(){return '<div></div>'}, the alert is -- "<div></div>" --> get error
with content: $('<div></div>'), the alert is {"0":{},"length":1} --> remains the problem

Title: Re: tooltip on datagrid + parameter = problem
Post by: stworthy on November 02, 2016, 03:18:05 PM

The 'content' function should be:

Code:

content: function(){return $('<div></div>')}

Title: Re: tooltip on datagrid + parameter = problem
Post by: catpaw on November 02, 2016, 04:34:38 PM

hi stworthy, as always thank you for your help, it works now

EasyUI Forum

General Category => General Discussion => Topic started by: catpaw on November 01, 2016, 12:22:20 PM