Create an image with a tooltip tag

Question

When I do this :

<div>
    <img id="product1" src="~/images/image.jpg">
    @(Html.DevExtreme().Tooltip()
    .Target("#product1")
    .ShowEvent("mouseenter")
    .HideEvent("mouseleave")
    .CloseOnOutsideClick(false)
    .ContentTemplate("ExcelRemote IR")
)
</div>

I get a picture that has a tooltip when I hover across it. I want to do the exact same thing, but I want to be able to create that by calling an Html helper, like this :

<p>
    @Html.CreateHoverContext(videoUrl: Localizer["VideoUrl"].Value, text: Localizer["This is untranslated"].Value)
</p>

In my CreateHoverContext function ...

public static HtmlString CreateHoverContext(this IHtmlHelper helper, string text = "", string videoUrl = "", string url = "", string imagePath= "")
{
    var ret = "";

    ret = @"<div>" +
    @"<img id= ""product1"" src = ""/images/image.jpg"">" +
    @" </div>";
    var ret2 = helper
        .DevExtreme()
        .Tooltip()
        .Target("#product1")
        .ShowEvent("mouseenter")
        .HideEvent("mouseleave")
        .CloseOnOutsideClick(false)
        .ContentTemplate("This is a tooltip");
    return new HtmlString(ret);
}

However, when I do this, I see an image, but the tooltip doesn't work. What am I doing wrong?

Answer 1

The problem was that I missed the # infront of the id :

public static HtmlString CreateHoverContext(this IHtmlHelper helper, string text = "", 
string videoUrl = "", string url = "", string imagePath= "")
{
    var ret = "";

    ret = @"<div>" +
    @"<img id= ""#product1"" src = ""/images/image.jpg"">" +
    @" </div>";
    var ret2 = helper
        .DevExtreme()
        .Tooltip()
        .Target("#product1")
        .ShowEvent("mouseenter")
        .HideEvent("mouseleave")
        .CloseOnOutsideClick(false)
        .ContentTemplate("This is a tooltip");
    return new HtmlString(ret);
}