Tooltip in Column

[apfanz]

I would like to have one of my columns display a value as well as a tooltip(an icon the user hovers over to display a value). The column would first display the status of a record as either incomplete, complete or expired. I got that part working. However, I would also like to add a tooltip that has additional information from the data source. Can a column in ng2-smart-table consist of more than 1 value from the data source? If so, how can that be done?

[brgaulin]

@apfanz See #557 But to do tooltips you would need to create a component. You can create a simple component that takes in your status and tooltip content, and adds the tooltip to the icon and off you go.

@somq posted this example of a similar render component: https://gist.github.com/somq/82192ebd857e22d6c5ebdd067fb92ed0

Then in your Column, add the following two options instead of type: 'html'

        type: 'custom',
        renderComponent: STPopoverViewComponent,

[dario30186]

Hi, you can add tooltip to your custom action without creating any custom component like this: actions: { columnTitle: '', delete: true, custom: [ { name: 'sendmail', title: '<i title="TITLE1" data-toggle="tooltip" class="ion-at"></i>' } ] },

I hope this helps

UPDATE: I don't know why, but the code I put was not displayed

[ccruza]

Hi, you can add tooltip to your custom action without creating any custom component like this:

I hope this helps

Is this a joke? Or maybe you just forgot to paste the code..

[dario30186]

@ccruza I'm sorry, the code was not displayed. I updated my answer

[ccruza]

Hello @dario30186

It's working perfectly on "custom action". Can you please explain how or what would be the code to do the same for the others "normal" columns? Maybe there is a property for column headers.

I want to achieve something like this:

Thanks!!

[dario30186]

@ccruza I never used this on standard columns

[ccruza]

@apfanz See #557 But to do tooltips you would need to create a component. You can create a simple component that takes in your status and tooltip content, and adds the tooltip to the icon and off you go. @somq posted this example of a similar render component: https://gist.github.com/somq/82192ebd857e22d6c5ebdd067fb92ed0 Then in your Column, add the following two options instead of type: 'html' type: 'custom', renderComponent: STPopoverViewComponent,

It's working perfectly for one column, but.. my table has 6 columns. Do I have to implement one renderComponent for each column? is there a way to pass value of the tooltip to the renderComponent and there i decide what to put on the tooltip text?

Thanks

[lucasa]

I need this too!

[vanavaraVL]

Because the feature is not supported still, I decided to implement this in that way, maybe, it will help someone.

In my view table.component.html

<ng2-smart-table
        [settings]="settings"
        [source]="data"
        class="table-responsive">
      </ng2-smart-table>

In my component table.component.ts

@Component({
  selector: 'ngx-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
})
export class TableComponent implements AfterViewInit {

public settings = {
    hideSubHeader: true,
    actions: false,
    pager: {display: false},
    columns: {
      columnNameA: { title: 'column name A', sort: false},
      columnNameB: { title: 'column name B', sort: false},
    },
  };

constructor(
    public tableService: TableService,
    private elRef: ElementRef,
  ) { }

  ngAfterViewInit(): void {
    this.initColumnsToolTips();
  }

  private initColumnsToolTips(): void {
    // find all visible head's columns in the table using DOM access
    const thead = this.elRef.nativeElement.querySelector('thead');
    const columns = thead.querySelectorAll('tr th');

    columns.forEach(c => {
      if (this.tableService.columnsTooltips[c.innerText] != null) {
        c.insertAdjacentHTML('beforeend',
          `<i title=\"${this.tableService.columnsTooltips[c.innerText]
          }\" data-toggle=\"tooltip\" class=\"icon ion-help-circled\"></i>`);
      }
    });
  }

Here columnsTooltips is just a simple dictionary that contains column titles as keys and tool tip texts as values:

In my service table.service.ts

@Injectable({
  providedIn: 'root',
})
export class TableService {

  public columnsTooltips = {
    'column name A': 'column A tool tip',
    'column name B': 'column B tool tip',
  }
 ....

And in my styles table.component.scss

:host ::ng-deep th {
  .icon {
    font-size: 18px;
    color: cornflowerblue;
  }
}

It's just to use more bigger size and use blue color for the icon.

But anyway, it'll be pretty nice to have this feature included into the solution.

Thanks!