ngx-datatable + ng-tab having issue in tooltip view

[Muzaeed]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Tooltip is displaying inside the ng-datable (datatable-body)

Expected behavior
Tooltip should populate on top of table since I have given higher z-index & additon to this the solution which got to the problem
md-tab-group,
md-tab-body,
.mat-tab-body-wrapper,
.mat-tab-body-content
{
overflow: visible !important;
}

Reproduction of the problem

What is the motivation / use case for changing the behavior?
Since the table is inside md-tab it may be causing some problem.....!

Please tell us about your environment:
@angular/cli: 1.1.1
node: 7.10.0
os: linux x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/compiler-cli: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.1

• Table version: 0.8.x
  "@swimlane/ngx-datatable": "^9.3.0"

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Google Chrome
  Version 58.0.3029.110 (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[wizarrc]

@Muzaeed This happens because the tooltip is inside the datatable template, specifically where the overflow is set to scroll. Can you add the tooltip template outside the datatable, possibly in an overlay? You would have to figure out where the row is offset yourself though.

[wizarrc]

Although it may break in the future, in the DataTableBodyComponent there are 3 internal features you can use. WARNING This may break in any future release.

1. [DataTableBodyComponent] getRowIndex - Call bodyComponent.getRowIndex(row); if you need to figure out the row index and have access to the row object.
2. [DataTableBodyComponent] rowHeightCache - Call bodyComponent.rowHeightsCache.query(idx - 1); where idx is the row index.
3. [DataTableBodyComponent] offsetY - If you need to know the current scroll position to offset.
4. [DatatableComponent] headerHeight - table header height
5. Subtract 3 from 2 and you should have your row height relative to the table's body.
6. Add 4 and 5 and that should be the offset relative to top of the data table.
7. Add overlay and adjust offset depending where overlay starts.

Update It looks like you can simply get the dollar sign icon position and use that from an overlay. I'll keep these steps here for anyone else that might need them though. I previously had needed a similar function for something else.

[Muzaeed]

Thanks a lot @wizarrc, I have added the tooltip outside ng-datatable. It's appearing on top of the table.Thanks once agin.....! :-)

[hellsm83]

@Muzaeed could you show us an example of your code? it would be helpful for other people who are at the beginning with angular2/4 and ngx-datatable

[bozzwin]

@Muzaeed Could you share with your solution??

[francisminu]

Hey!
@Muzaeed Could you please show a plunker of how it was done. Have been checking this feature for a couple of days now.
Thanks!

[Muzaeed]

Place the tooltip outside the ngx-data table. I had given the custom css for tooltip to come in one place, by makig it's position absolute, with top, left, bottom values.