Can you attach a PopOver to an img tag?

[David]

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]

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]

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".