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 = ''
}
},
})),
],
},
You can use the tdAttr
to show tooltips.
const type = 'sell';
if (value) {
gridcell.tdAttr = `data-qtip="${type} ${value}"`
}