Display Tooltip when Hovering over a Column Header in React

Background:

FlexGrid can be used in conjunction with Wijmo's Tooltip control to display data to a user when they mouse over specific portions of the grid. In this article, we'll be going over how developers can tie Tooltips to their grid's column headers.

Steps to Complete:

1. Use the AfterViewInit interface to have access to the FlexGrid after its been initialized

2. Add mouseover and mouseout events to track when the cursor moves in and out of a cell header

3. Determine what tooltip to display when a column header is hovered

Getting Started:

Use the AfterViewInit interface to have access to the FlexGrid after its been initialized

To add the event to FlexGrid, we have to make sure that the grid has been initialized and rendered first. This can be done by importing the AfterViewInit interface and using the ngAfterInit() method to apply the event to the grid.

Add mouseover and mouseout events to track when the cursor moves in and out of a cell header

The tooltip will need to be displayed when the mouse moves over one of the column headers, and disappear when the mouse moves out of the column header. To accomplish this, we'll use the mouseover and mouseout events to determine when the pointer moves over the FlexGrid, and then use the hitTest() method to track the location of the cursor when its inside the FlexGrid.

ngAfterViewInit() {
    if(this.flexGrid) {
        let toolTip = new wjcCore.Tooltip();
        this.flexGrid.hostElement.addEventListener("mouseover", (e: MouseEvent) => {
            let ht = this.flexGrid.hitTest(e),
            rng = null;
            if(!ht.range.equals(rng)) {
                if(ht.cellType == 2) {
                    // Determine the tooltip to display
                }
            }
        });
        this.flexGrid.hostElement.addEventListener("mouseout", (e: MouseEvent) => {
            toolTip.hide();
        });
    }
}

Determine what tooltip to display when a column header is hovered

Now that the event has been added and it can determine when the user is hovering over a column header, the last thing to do is determine what tooltip to display.

rng = ht.range;
let data = this.flexGrid.getCellData(rng.row, rng.col, true),
cellElement = document.elementFromPoint(e.clientX, e.clientY),
cellBounds = wjcCore.Rect.fromBoundingRect(cellElement.getBoundingClientRect()),
tipContent;
if(cellElement.innerHTML == 'Location') {
    tipContent = 'States';
} else if(cellElement.innerHTML == 'Capital) {
    tipContent = 'State Capitals';
} else {
    tipContent = 'Capital Population';
}
toolTip.show(this.flexGrid.hostElement, tipContent, cellBounds);

All we do is track the element that is being hovered (in this case, a specific column header). Based on the innerHTML of the cell, we determine what to display in the tooltip.

You can also find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-flexgrid-header-tooltip