创建带有工具提示标签的图像

Question

当我这样做时：

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

当我将鼠标悬停在图片上时，我得到了一张带有工具提示的图片。我想做完全相同的事情，但我希望能够通过调用 Html 助手来创建它，如下所示：

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

在我的 CreateHoverContext 函数中...

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);
}

但是，当我执行此操作时，我看到了一张图片，但工具提示不起作用。我做错了什么？

Answer 1

问题是我错过了 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);
}

创建带有工具提示标签的图像

Create an image with a tooltip tag

c#

html

asp.net-core

razor

devextreme