Tooltipster

[queensgambit9]

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

[queensgambit9]

Solved.

[queensgambit9]

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.

[paramvir]

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

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

[queensgambit9]

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?

[paramvir]

Add a check:

Code: [Select]

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


[queensgambit9]

Works fine, thanks.

[queensgambit9]

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?

[paramvir]

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

[queensgambit9]

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

[paramvir]

yeah right!