Can you attach a PopOver to an img tag?

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

Hello,

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


@(Html.Kendo().Popover()
        .For("Instructions_Image")
        .Position(PopoverPosition.Center)
        .ShowOn(PopoverShowOn.MouseEnter)
        .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));
        })
        .Width(400)
        .Height(200)
)


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

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


.For("Instructions_Image")

Should be


.For("#Instructions_Image")

 

And changing that has got it working now.

 

Tsvetomir
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?

Tags
Popover
Asked by
David
Top achievements
Rank 1
Share this question
or