Tooltip on wijmo flexgrid column

Originally Posted 14 November 2016, 8:03 am EST

  • Originally Posted 14 November 2016, 8:03 am EST

    I'm using wijmo "Wijmo 5.20161.138 eval" flexgrid, want to show tooltip on one column

    <wj-flex-grid-column [header]="'Error message'" [binding]="'ErrorMessage'" [width]="'*'">
    <template wjFlexGridCellTemplate [cellType]="'Cell'" #cell="cell">
    <div data-toggle="tooltip" data-placement="top" title={{cell.item.ErrorMessage}}>

    it's working, but I'm not able to change it's CSS.
    Is there is any inbuild wijmo tag for tooltip? I found wj-tooltip but how to use that for flexgrid column?
  • Marked as Answer


    We are sorry. We did not find any direct approach for changing bootstrap tooltip’s CSS. Hence we have escalated it to the development team to get some insights. In the meantime, you can use Wijmo Tooltip Class. To show tooltip one need to handle mouse appropriate events to show or hide tooltip. For reference, you can see attached sample that implements the same.

    Manish Kumar Gupta
  • Reply

    I am using your example and I am getting

    Property 'flex' does not exist on type 'HTMLElement'.

    How do I instantiate flex as an HTMLElement?

    let toolTip = new wjcCore.Tooltip();
    this.flex.hostElement.addEventListener('mouseover', function (e) {
    let ht = this.flex.hitTest(e),
    rng = null;

    if(!ht.range.equals(rng)) {
    if(ht.cellType == wjcGrid.CellType.Cell) {
    rng = ht.range;
    let data = this.flex.getCellData(rng.row, rng.col, true),
    tipContent = '<b>Column</b>',
    cellElement = document.elementFromPoint(e.clientX, e.clientY),
    cellBounds = wjcCore.Rect.fromBoundingRect(cellElement.getBoundingClientRect());, tipContent, cellBounds);
    this.flex.hostElement.addEventListener('mouseout', function (e) {
  • Reply

    Please try with flex.hostElement since hostElement property returns HTMLElement.

    Manish Kumar Gupta
  • Reply

    I was able to get that to work. I am dynamically creating wijmo grids through a ngFor and the tooltip was only working for just the first grid. What would be the best way to make it work for all of them?

    They do all have the same name #flex on them.

    Thank You
  • Reply

    Hi Andy,
    Each grid should have a different reference. Please try with different reference. This should work.

    Manish Kumar Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels