Bootstrap Tooltips on FixedColumns

aeh918

I have a scrolling table with 25 columns. The first 5 are fixed. I am initializing the tooltips with drawCallback.

When scrolling the remaining 20 columns, the tooltips for the fixed 5 also scroll left rather than staying over the TD on which they should be initialized. I understand that the fixedColumns plugin uses a cloned table, so I attempted to namespace the initialization to the cloned table, but that did not work (no tooltips initialized).

I have attached a test page which demos the problem. You'll notice that if you scroll the table and then hover any of the fixed columns, their tooltips are no longer over the correct columns. The tooltips are only in the correct position when the table is not scrolled.

colin

Hi @aeh918 ,

I just tried that test page, and everything worked as expected for me. I tried both Chrome and FF. For me, the tooltips for the fixed columns remain over those columns regardless of the scroll position.

If I'm missing something, could you give some more information on how to reproduce the problem, please.

Cheers,

Colin

aeh918

So sorry--I've been on leave for a bit. This is still occurring in our table. See attached images for what I am seeing. When scolled, the tooltip is floating on the far left of the table:

BUt unscrolled, its over the data as it should be:

allan

What's happening is that the fixed columns are placed over the main table using div.DTFC_LeftWrapper which is position:absolute, but the tooltips are not taking that fact into account. They are seeing the scrolling container and shifting due to the scroll.

Try setting the container for the tooptips to that wrapper element which should help address that.

Allan

aeh918

Thanks! This pointed me in the right direction. I select my fixed th's and td's using div.DTFC_LeftWrapper. I had to add extra code to first wait until div.DTFC_LeftWrapper exists before initializing the tooltips--but now it works. Thanks!

ragav_g

Hi @allan I too face a very similar issue. The tooltip is going beneath the div.DTFC_LeftWrapper. I tried to trigger "$("[data-toggle='tooltip']").tooltip()" in console window, even that doesn't work. Can you please guide/show an example so that I look in the right direction. Also is there any callback function that I can use to trigger this after fixedcolumn is created?

colin

For the callback, if you use initComplete, the table will be ready and fully drawn. For your specific problem, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ragav_g

I tried to replicate it but i could exactly make it. Whereas, the partial issue occurs.

The tooltip hides behind the top nav bar in the first row of the table.

That's what happens to my app. The tooltip goes behind the top header and behind the fixed column as well

http://live.datatables.net/tanegudu/5/edit

allan

Try setting the container for the tooptips to that wrapper element which should help address that.

This is what you need to do. The bootstrap documentation notes there is a container option. So adding container: 'body' resolves it: http://live.datatables.net/tanegudu/6/edit .

Allan