Tooltip basic funcionality is not working on rows that weren't shown initially

jmeile

Link to test case: https://jsfiddle.net/jmeile/yg4ntdah/56
Description of problem:

I'm using a tooltip css based solution together with Jquery events for my DataTables. Basically, the tooltips are hidden initially and they will be shown only if the user clicks on them. This only works for the first 25 entries (this is my initial page length); however, when navigating to the next entries, the tooltips won't work. Right now, I only have three tooltips: in rows 10, 19, and 50.

I have searched the forum without finding a concrete solution. What I know is that I should do something after the DataTable gets drawn, but I don't know exactly what. Could you take a look at my test case and tell me how to solve this?

I guess, I will have to reapply the whole styles, but I'm afraid, I don't want to code the full css in javascript.

Thanks in advanced.

Best regards
Josef

kthorngren

Looks like you can use delegated events, like this example. I updated your click. event handler like this:

  $('#example').on("click", '.jm-tooltip', function(e) {
    e.stopPropagation();
    hide_tooltips($(this));
    $(this).children(".jm-tooltiptext").toggle();
    $(this).toggleClass("show");
  });

Here is the updated example:
https://jsfiddle.net/8htb21yd/

Kevin

jmeile

Hi Kevin

Thanks for your answer. It seems to work; however there is something that it is not doing:

If you try to select the text on the tooltip, then it will be closed. My idea was closing the tooltip only if the user clicks on another tooltip or it clicks outsite from it.

I really want the select function to be able to copy the text.

Edit: The first page behaves as expected, the tooltip won't be closed if you click on it. But the tooltip from the second page will be closed.

kthorngren

I didn't look at that. You may need to do something similar with the second click event. Please update the test case with what you try then we can take a look.

Kevin

jmeile

The thing is, that your case seems to do what I thought, calling "stopPropagation"; however, it seems that the event get's propagated.

jmeile

Ok, I think I solved it:
https://jsfiddle.net/jmeile/05xmtfbu/23/

I removed all the other click handlers and leave the one you defined, then I added a second delegate on the tooltip class and stop the propagation of click events. It seems to work.

Thanks for guiding me to the right direction

jmeile

The final version:
https://jsfiddle.net/jmeile/05xmtfbu/46/

That: "$('body').on('click', ...)" handler at the end wasn't doing anything at all because body will be equally high to the content, so, it won't go necessarily to the end of the browser window. With "$('document').on('click', ...)" I got the desirable behaviour