Tippyjs: Tippy inside table not showing

[zenkkor]

Hi,

I am trying to use tippy inside table rows and am having no luck getting it to work. I am looking at this error: https://github.com/FezVrasta/popper.js/issues/276 which seems to be what's happening to me. Any ideas how to bypass/fix this? I'd really love to use this plugin.

Thanks,
Rok

[atomiks]

Try changing the appendTo option and append it to a different element other than the body which has some form of layout position: relative, and maybe try adding popperOptions in the settings and change the preventOverflow setting (https://github.com/FezVrasta/popper.js/issues/302)

[zenkkor]

Awesome, thank you @atomiks that did the trick!

For any other seekers in the future this is what I did to resolve it:

1. I had my table wrapped in a block wrapper with class .table-responsive with overflow-x: auto to make the table responsive
2. Added (to Tippy options): appendTo: document.querySelector('.table-responsive'),
3. Added (to Tippy options):

popperOptions: {
    modifiers: {
        preventOverflow: {
            boundariesElement: 'viewport'
        }
    }
}

Works like a charm!