Images in Popover?

[e.edson]

Hello,

I have a design goal to provide an image in a popover when hovering over a link in a data grid. I am wondering if anyone has had any luck using images in a Popover form. I have created a specific Image_Hover form that has data bindings for an Image Source to the incoming image. I am creating the popover object with:

self.link_4.popover(content=Image_Hover(item=self.item), placement = 'bottom', trigger='hover')

I have had no problem binding labels in the Image_Hover form to elements of the table row (self.item[‘sample_id’]) for instance, but haven’t been able to get an image to show up in the popover.

Any help would be greatly appreciated!

Ethan

[stucork]

I see the problem.

I’ve updated the example:

Implementing Popovers (floating forms)

Update Sep 2021 This dependency is now maintained as part of anvil-extras To add the depenency simply add anvil-extras as a third party dependency: C6ZZPAPN4YYF5NVJ. popover can be used as an individual dependency with the third party dependency code: RLLQ34XAY246K5R3. The source code is identical to anvil-extras but may differ by version number. Documentation: Popovers — Anvil Extras documentation This is both a show and tell and a feature request. I wanted to use popovers in some of…

and i’ve added a working image for the hover.

The key is to do with widths and heights - we need to be able to tell the popover how wide/tall to be.

• I put the image in a flow panel
• added a width of 200 (I think by default the popover maxes out at just over 200)
• made the image zoom to fill with a height of 200