Bootstrap tooltip is not visible in FixedColumn

cheynerpb

Hi, I'm using tables which are loaded via ajax and they have a FixedColumn which is the last column in tables. The content from the server has information for each row but info for FixedColumn is HTML code that contains two buttons like that:

<button type='button' class='btn btn-link btn-sm text-primary' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal1'>
      <i class='fas fa-pen' data-toggle='tooltip' title='Editar'></i>
</button>
<button type='button' class='btn btn-link btn-sm text-danger' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal2'>
      <i class='fas fa-trash' data-toggle='tooltip' title='Eliminar'></i>
</button>

The problem is that tooltips in buttons inside fixedColum are not visible if the table is not scrolled horizontally.

I tried to make a test case but I don't know how to make an identical example because of the ajax thing.

live.datatables.net/huwomuqi/2/edit

Column named "Acciones" inside the test case is fixedColumn and where buttons are when table is fully loaded

I appreciate any help. Thanks in advance.

kthorngren

See if this thread helps. Allan's example in the last post seems to work.

Kevin

cheynerpb

In that example the table is loaded with static data and I have some tables in my project which data is loaded in the HTML like that example and those don't have that issue but in tables loaded vía ajax, tooltips in the fixed column are not visible if the tablet is not scrolled. The problem seems to be in tables loaded via ajax.

kthorngren

I updated Allan's example to use Ajax and it still works:
http://live.datatables.net/ticixigu/1/edit

In addition to adding the ajax option I changed from initComplete to rowCallback so the tooltip is applied to each page when shown. initComplete only applied the tooltip to the first page.

Maybe you can update your example to my/Allan's example to show the problem you are having. The FixedColumns aren't apart of the original table which requires the configuration that Allan provided.

Kevin

cheynerpb

I modified the last test case you posted changing Bootstrap version from 3.3.4 to 4.1.3 which I'm using and the tooltips behavior changes.

live.datatables.net/ticixigu/5/edit

Any solution for that?

kthorngren

What is the behavior change?

Kevin

kthorngren

NVM I see the problem. The tooltip is attaching to the original table, not the table created by FixColumns. So the tooltip travels with the scrolling of the Name column, in the original table, behind the FixColumns table.

I don't know how to attach it to the FixColumn cell. Maybe @allan or @colin can help.

Kevin

cheynerpb

I hope they see this post and maybe they have a solution.

kthorngren

Just to make it all official I loaded the proper Datatatbles BS4 integration files. Still the same problem.
http://live.datatables.net/relekaho/1/edit

Kevin

allan

Kevin - thanks for preparing the example!

It took a while, but it looks like its to do with the ordering of the events. If I put in a micro delay then it works as expected: http://live.datatables.net/relekaho/3/edit .

I'll need to circle back to see if I can improve it beyond that, but that's the workaround for now.

Allan