ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on January 16, 2023, 07:43:28 pm

Title: Tooltipster
Post by: queensgambit9 on January 16, 2023, 07:43:28 pm

Trying to set HTML content for tooltipster to button in toolbar in refresh event, but can't get it to work properly. Using title attribute on element works fine though...

toolbar with title attribute works:

Code: [Select]

type: 'button',
label: "toolbar_element",
attr: 'title="test"',
cls: 'tooltip'
toolbar with id and set content in refresh event (do not work):

Code: [Select]

type: 'button',
label: "toolbar_element",
attr: 'id="toolbar_element"',
cls: 'tooltip'
refresh event

Code: [Select]

$('.tooltip:not(".tooltipstered")#toolbar_element').tooltipster({
content: $('<span><strong>This text is in bold case !</strong></span>')
});

Old thread:
https://paramquery.com/forum/index.php?topic=1979

Title: Re: Tooltipster
Post by: queensgambit9 on January 16, 2023, 11:22:26 pm

Solved.

Title: Re: Tooltipster
Post by: queensgambit9 on January 19, 2023, 12:34:51 pm

Still having issue with this...

in toolbar:

Code: [Select]

{
  type: 'button',
  label: "label",
  attr: 'id="toolbar_button"'
}
in reftresh event:

Code: [Select]

refresh: function() {
                   
  $('#toolbar_button').tooltipster({               
    content: $('<strong>this is a text</strong>')
  });

}
It works but in console I get output:

Code: [Select]

Tooltipster: one or more tooltips are already attached to the element below. Ignoring.

Title: Re: Tooltipster
Post by: paramvir on January 19, 2023, 12:50:45 pm

Please use toolbar.item init callback to initialize the custom control in toolbar.

https://paramquery.com/pro/api#option-toolbar

Title: Re: Tooltipster
Post by: queensgambit9 on January 19, 2023, 02:54:41 pm

ok, tried this in toolbar item:

Code: [Select]

init: function() {

$('#toolbar_button').tooltipster({               
    content: $('<strong>this is a text</strong>')
  });

}
but this generates even more of the console messages...I guess the callback is not correct?

Title: Re: Tooltipster
Post by: paramvir on January 19, 2023, 03:25:32 pm

Add a check:

Code: [Select]

if( !$( '#toolbar_button' ).hasClass("tooltipstered") ){
  $('#toolbar_button').tooltipster({               
    content: $('<strong>this is a text</strong>')
  });
}


Title: Re: Tooltipster
Post by: queensgambit9 on January 19, 2023, 03:33:51 pm

Works fine, thanks.

Title: Re: Tooltipster
Post by: queensgambit9 on January 19, 2023, 04:07:41 pm

Hmm...Im using jQuery tabs for multiple grids where I reuse the toolbar. Nothing happens when the tooltip is triggered on other tabs and no error message is given.
Is there any modifications needed when using jQuery tabs for the other tabs to work?

Title: Re: Tooltipster
Post by: paramvir on January 19, 2023, 04:13:26 pm

You should assign class instead of id to the control because id is unique on a document and can't be shared between tabs.

and need one more correction:

Code: [Select]

init: function(ele) {

  $(ele).tooltipster({  //use ele to initialize.
    content: $('<strong>this is a text</strong>')
  });

}

you can add check to the above code if there are any console errors/warnings.

Example of custom controls in toolbar: https://paramquery.com/pro/demos/import_xlsx_tabs

Title: Re: Tooltipster
Post by: queensgambit9 on January 19, 2023, 06:21:25 pm

Seems to work fine, so no class is needed with this method (ele) for tooltipster I guess?

Title: Re: Tooltipster
Post by: paramvir on January 19, 2023, 06:46:35 pm

yeah right!