Django 管理员 - 在 hover 上显示图像

Question

I'd like to display a thumbnail in a popover when I hover over text (a camera emoji) in our Django Admin view. The code I have works, but displays the image inline, which disrupts the rest of the layout of the site

I'm by no means a Django expert, so there might be something easy I'm missing. I'm totally open to using other libraries to help if that's the best path forward, but am not sure of how to appropriately load them in to django admin. I'm also open to pure js/css solutions - whatever works best!

Here's the code that I have

def image_column(self, obj):
    format_html(foo + " " + \
            '''<a href="{}"" target="_blank" 
            style="font-size: 18pt" 
            onmouseover="document.getElementById('{}_img').style.display='block';"
            onmouseout="document.getElementById('{}_img').style.display='none';">📷  
            <img id="{}_img" style="display:none" src="{}" />'''.format(img_url, img_id, img_id, img_id, img_url)

I'd love any thoughts or suggestions on the best way to make it 'popover' instead of display inline. Thank you!!

EDIT: Things are working now, with the exception of the camera emoji displaying over the pop over. The image in the background is a map (which should be on top). The camera image is from the row beneath it

Answer 1

That might only be an issue to do with the position property of the image, if it is position: relative , then it will fix itself among the other elements, you have to set it to position: absolute and from here you should give it top and left , for example: top: 0px; left: 0px; top: 0px; left: 0px; relative to the parent element which I guess is the <a> element... And you should also apply position: relative to the parent element: which again I think is <a> or whichever parent element is to the <img> element