Tooltips

We've set a fixed width on the avatar column that makes the header name impossible to read. We can have a nicer user experience by enabling a tooltip for that column.

Update the column definition for avatar to this:

// src/App.js
{
   headerName: "Avatar",
   field: "avatar",
   cellRenderer: ({ value }) =>  `<img style="height: 14px; width: 14px" src=${value} />`,
   maxWidth: 60,
   headerTooltip: "Customer Avatar"
   },

When you run the app with npm start and navigate to localhost:3000, you can now hover over the avatar column and see a tooltip for "Customer Avatar." Neat!

In the next video, we'll start learning about column groups.