Tooltips within ngx-datatable are partially hidden behind row borders

Question

Tooltips within an ngx-datatable are partially hidden behind row borders.

I tried changing the z-index for .tooltip-inner. But it didn't had an effect.

Any ideas why, how can it be fixed?

https://stackblitz.com/edit/angular-cvaq2e?file=app%2Fapp.component.html

Move over the Edit buttons, the tooltips are behind the row borders.

Table version: 11.2.0 with bootstrap theme
Angular version: 5.2.3
Browser: firefox, chrome
Language: TS

score 2 · Accepted Answer · answered Mar 23 '18 at 15:08

2

The stackblitz thing doesn't work so I'm guessing slightly as to what tooltips you are using. If you're using ng-bootstrap, you should be able to add

container="body"

as attribute to each element that triggers the tooltip.

answered Mar 23 '18 at 15:08

MikeOne

4,789
2
26
23

Worked instantly. thx. NgbTooltipConfig.container is null by default. Any idea why "body" is not the default? Which situations do speak against setting "body" as a default? – Fritz Herbers Mar 23 '18 at 15:32
No idea why, I almost always use body for tooltips so it would make sense at least for me to have that as default. But great it worked for you. I would appreciate it if you could mark my answer as correct. – MikeOne Mar 23 '18 at 15:35

score 0 · Answer 2 · answered Mar 26 '18 at 10:18

To have a global configuration I added the following in my core.module:

export function NgbTooltipConfigFactory() {
  const config = new NgbTooltipConfig();
  config.placement = 'bottom';
  config.container = 'body';
  return config;
}

@NgModule({
  providers:
    {
      provide: NgbTooltipConfig, useFactory: () => NgbTooltipConfigFactory(),
    }

Tooltips within ngx-datatable are partially hidden behind row borders

2 Answers2