ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on February 25, 2017, 06:37:29 pm

Title: Tooltipster in render function
Post by: queensgambit9 on February 25, 2017, 06:37:29 pm

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?

Title: Re: Tooltipster in render function
Post by: paramvir on February 27, 2017, 10:30:18 pm

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

Title: Re: Tooltipster in render function
Post by: queensgambit9 on March 06, 2017, 07:46:17 pm

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

https://jsfiddle.net/tjgxwLda/

Title: Re: Tooltipster in render function
Post by: paramvir on March 06, 2017, 08:18:44 pm

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/

Title: Re: Tooltipster in render function
Post by: queensgambit9 on March 06, 2017, 08:24:59 pm

Perfect! Thanks for quick help.

Title: Re: Tooltipster in render function
Post by: queensgambit9 on January 08, 2018, 03:24:52 pm

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

Title: Re: Tooltipster in render function
Post by: paramvir on January 08, 2018, 09:35:39 pm

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

Isn't your span supposed to have title attribute?

Title: Re: Tooltipster in render function
Post by: queensgambit9 on January 09, 2018, 04:39:28 pm

Solved, works fine in 5.0.1.
Thanks.

Title: Re: Tooltipster in render function
Post by: queensgambit9 on February 09, 2018, 03:38:57 pm

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?

Title: Re: Tooltipster in render function
Post by: paramvir on February 09, 2018, 04:19:27 pm

Exclude ".tooltipstered" while initializing

Code: [Select]

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

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

Title: Re: Tooltipster in render function
Post by: paramvir on February 12, 2018, 09:00:57 am

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/