# Upgrade guide for Grid v3.0.1

## Showing async content in a Tooltip

Based on feedback that loading remote content into a Tooltip was not easy enough we refactored our internals a bit.
Below you see the old, deprecated way of showing async Tooltip content:

```javascript
// DEPRECATED
new Tooltip({
    listeners : {
        beforeShow : ({ source : tip }) => {
            const showingFor = tip.activeTarget;

            tip.html = false;
            AjaxHelper.get('someurl').then(response => {
                // Still visible for the same triggering element by the time the data arrives...
                if (tip.isVisible && tip.activeTarget === showingFor) {
                    tip.html = 'Done!';
                }
            });
        }
    }
});
```

The new way, where `html` can also accept a Promise yielding a string. Everything becomes much easier:

```javascript
new Tooltip({
    listeners : {
        beforeShow : ({ source : tip }) => tip.html = AjaxHelper.get('someurl').then(response => response.text())
    }
});
```

The old way of setting html to `false` to trigger a loading indicator will be removed in v5.0.0.

More details and examples in the updated [Tooltip docs](#Core/widget/Tooltip).

## Loading remote data with CellTooltip feature

Much like the above, we received feedback that loading remote content into the CellTooltip feature was not easy enough.
So we refactored our internals a bit and below you see the old, deprecated way of showing async content in a grid cell
Tooltip:

```javascript
// DEPRECATED
let grid = new Grid({
    features : {
        cellTooltip : {
            // Async tooltip renderer
            tooltipRenderer({ record, tip }) {
                // Initiate some async action
                AjaxHelper.get(`tooltip.php?id=${record.id}`).then(() => {
                    tip.html = 'Async content here...';
                });

                // Signal async tooltip. The tooltip will display a load mask until its html is updated (above)
                return false;
            }
        }
    }
});
```

The new way, where `tooltipRenderer` can also accept a Promise yielding a string. Everything becomes much easier:

```javascript
let grid = new Grid({
    features : {
        cellTooltip : {
            // Async tooltip renderer
            tooltipRenderer : ({ record }) => tip.html = AjaxHelper.get(`tooltip.php${record.id}`).then(response => response.text())
        }
    }
});
```

More details and examples in the updated [Tooltip docs](#Grid/feature/CellTooltip#config-tooltipRenderer).

The old way of setting html to `false` to signal async loading will be removed in v5.0.0.


<p class="last-modified">Last modified on 2023-10-26 8:19:11</p>