Tooltipster in render function

[queensgambit9]

Trying to use Tooltipster (http://iamceege.github.io/tooltipster/) in render function. The class is added to my img but it has no effect it seems.
Gives no error message and outside grid it works fine.

Any idea how to solve?

[paramvir]

I have no idea about Tooltipster. If you could share a jsfiddle, then I might be able to look into it.

[queensgambit9]

Great, thanks. Put a span outside grid to show effect when it works.

https://jsfiddle.net/tjgxwLda/

[paramvir]

Ok, I see that. It's because tooltipster does one time DOM binding and doesn't observe for any changes in DOM after initial binding.

Since grid cells are composed dynamically, tooltipster could be initialized in the refresh event.

https://jsfiddle.net/tjgxwLda/1/

[queensgambit9]

Perfect! Thanks for quick help.

[queensgambit9]

Tried in toolbar like:

Code: [Select]

type: '<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span><div class="tooltip_templates">
<span id="tooltip_content"><strong>This is the content of my tooltip!</strong></span></div>',
Doesn't seem to work but get no error message, works fine outside grid...

[paramvir]

works fine: https://jsfiddle.net/tjgxwLda/3/

Isn't your span supposed to have title attribute?

[queensgambit9]

Solved, works fine in 5.0.1.
Thanks.

[queensgambit9]

I currently initialize tooltipster in the refresh event:

Code: [Select]

refresh: function(){
              $('.tooltip').tooltipster({
  ...
              });}

Problem is that I get in console (since v5):

"Tooltipster: one or more tooltips are already attached to the element below. Ignoring.
tooltipster.bundle.min.js:1 <span class=​"...">​…​</span>​
"

How should I initialize it instead?

[paramvir]

Exclude ".tooltipstered" while initializing

Code: [Select]

$('.tooltip:not(".tooltipstered")').tooltipster({
});

https://jsfiddle.net/tjgxwLda/4/

[paramvir]

Yet another way ( seems better ) to add Tooltipster to whole cell without need to add span.

Code: [Select]

        render: function(ui) {
          return {
            attr: "title='" + ui.cellData + "'",
            cls: "tooltip"
          }
        }

https://jsfiddle.net/tjgxwLda/5/