ExtJs - how to add a tooltip in this situation and add the renderer in a loop

Question

I have a problem because I want to add a tooltip to these elements, for now any example, but I can't add anything. I am having problems with the scope of my task here. So here I have tiles that contain some information and when hovered over I would like to have a tooltip with additional information.

In addition, someone can help me solve the issue of being able to iterate through all the elements of my strore and use the renderer for them? As you can see now I have { length: 5 } but this is not a good thing because I don't know what the length of the array is. I would like the mechanism to work for all elements and any length of the array.

Thanks for your help

columns: [
    ...Array.from({ length: 5 }, (_, index) => ({
      renderer: function (value, gridcell, record) {
        value = record.get('sell')[4 - index]
        if (value) {
          gridcell.tdCls = 'sell'
          return (
            ('Example' || '') +
            '<br />' +
            value.quantity
          )
        } else {
          gridcell.tdCls = ''
        }
      },
    })),
    {
      dataIndex: 'price',
      renderer: function (value, gridcell, record) {
        let quantity = 0
        record
          .get('sell')
          .forEach((num) => (quantity += Number(num.quantity)))
        record
          .get('buy')
          .forEach((num) => (quantity += Number(num.quantity)))
        gridcell.tdCls = 'amount'
        return `${Common.Formatter.to4PrecisionPrice(value)}<br />${quantity}`
      },
    },
    ...Array.from({ length: 5 }, (_, index) => ({
      renderer: function (value, gridcell, record) {
        value = record.get('buy')[index]
        if (value) {
          gridcell.tdCls = 'buy'
          return (
            ('Example' || '') +
            '<br />' +
            value.quantity
          )
        } else {
          gridcell.tdCls = ''
        }
      },
    })),
  ],
},

Answer 1

You can use the tdAttr to show tooltips.

const type = 'sell';

if (value) {
    gridcell.tdAttr = `data-qtip="${type} ${value}"`
}