CDataTable With Clickable Rows And CPopover For Selected Fields

Is it possible to have a CDataTable with clickable rows and scoped fields that display popovers on hover? I tried that and nothing happens.

However if I remove the clickableRows and onRowClick attributes and change trigger to “click” then it works - so I’m confident I have the CPopover configured correctly.

But what I want is for the image column displayed in the datatable to display a popover when I hover over it.

Here’s an excerpt of my code using coreui react admin.

const fields = [
  { key: 'mainImageUrl', label: 'Photo', sorter: false, filter: false,  _style: { width: '25%'}},
];
...
     <CDataTable
        fields={fields}
        items={products}
        clickableRows
        onRowClick={(item) => ... 
        scopedSlots = {{
            'mainImageUrl': (item)=>(
              <td key={item.key}>
                <CPopover header="Popover Header"
                    content={`<b>Popover content</b>`}
                    placement={'top-start'}
                    interactive={true}
                    trigger={"hover"} >
                    <CImg
                        src={item.mainImageUrl}
                        shape={"rounded"}
                        width={45}
                        height={45}
                        />
                </CPopover>
              </td>)
        }}