CODEWITHSUNDEEP
ngx-datatable
Brian
Brian

Reputation: 615

ngx-datatable: How to make tooltips appear

When using the ngx-datatable library, sometimes a tooltip appears when hovering over a table cell and sometimes not. I have a table with custom cell templates and would like to make these tooltips appear.

Here are examples where tooltips appear when hovering over table cells:

And here are examples where they don't appear:

Can someone please explain how/why the tooltips sometimes appear?

Upvotes: 1

Views: 6766

Answers (3)

Nuryagdy Mustapayev
Nuryagdy Mustapayev

Reputation: 775

I also was able implement tooltip with ngbTooltip.

<ng-template let-column="column"
      ngx-datatable-header-template>
      <div container="body"
           [ngbTooltip]="'tooltip text">
           header 1
      </div>
</ng-template>

Note that tooltip was not displayed properly until I added container="body"

Upvotes: 2

Izzy030
Izzy030

Reputation: 59

You can easily use the tooltip attribute for bootstrap and data-tooltip for materialize. The basic attribute would be title.

tooltip="your tooltip"

But there is some conflict with the template class so its possible that you lose the sort functionality if you want tooltips in the column headers. There is workaround like this.

<ngx-datatable-column  [width]="500" prop="name" headerClass="text-left">
                    <ng-template ngx-datatable-header-template let-column="column" let-sort="sortFn">
                        <div class="d-inline-block datatable-header-cell-wrapper" tooltip="your tooltip" container="body" [adaptivePosition]="false" placement="top">
                            <span class="datatable-header-cell-label draggable" (click)="sort()">Column Header</span>
                        </div>
                    </ng-template>

Upvotes: 1

Brian
Brian

Reputation: 615

I figured out this is due to the title attribute being set on the cells. I'm not sure why it is set in some cases and not others, but at least I can add it in my own templates.

Upvotes: -1

Related Questions