Can you attach a PopOver to an img tag?

0 Answers 89 Views
Top achievements
Rank 1
David asked on 21 Sep 2021, 09:01 PM


I have a need to have a popover appear when hovering/clicking on an image. My first attempts to get this to work has been unsuccessful. With both using an img tag, and an img wrapped in a span, I've not been able to get the popover to display. There aren't any console error messages to speak of. Wondering whether I'm approaching this wrong, and whether there's a way to make this work for me.

I've got the image defined as:

<img id="Instructions_Image" src="@Url.Content("~/Instructions_Image.png")" /> 

And the popover is defined at the top of the view as

        .Header("More Information:")
        .Body("Information content")
        .Animation(animation =>
            animation.Open(op => op.Zoom(ZoomDirection.In).Duration(5));
            animation.Close(cl => cl.Zoom(ZoomDirection.Out).Duration(5));

Top achievements
Rank 1
commented on 22 Sep 2021, 01:43 PM

Looking at this the next day, I see the error.


Should be



And changing that has got it working now.


Telerik team
commented on 24 Sep 2021, 08:44 AM

Hi David, indeed, the .For() option of the Popover accepts a jQuery selector. Therefore, omitting the # would search for HTML node elements called "Instructions_Image" since there are none, the Popover would fail to find the correct element. Prepending the # would make it search for an element with ID "Instructions_Image". 

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question