自定义 HTML Helper、CSS 和数据属性有问题

Question

我写了一个自定义助手：

    public static MvcHtmlString TextBoxForWithTooltip<Tmodel, TProperty>(this HtmlHelper<Tmodel> htmlHelper, Expression<Func<Tmodel, TProperty>> expression, object htmlAttributes = null, string tooltip = "")
    {
        var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        IDictionary<string, object> attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
        if (!string.IsNullOrEmpty(metaData.Description))
        {
            attributes.Add("title", metaData.Description);
        }
        if (!string.IsNullOrWhiteSpace(tooltip))
        {
            attributes.Add("data-tooltip", tooltip);
        }
        if (attributes.ContainsKey("style"))
        {
            var val = attributes["style"];
            attributes["style"] = val + ";border-radius: 6px;";
        }
        else
        {
            attributes.Add("style", "border-radius: 6px;");
        }
        return htmlHelper.TextBoxFor(expression, attributes);
    }

还有我从 [这里][1] 获得的 CSS。当您将数据工具提示分配给按钮或“a”或“li”元素时，这非常有用。但不是输入或 TextBoxFor。我在页面源中看到了 data-tooltip 属性，但它显然不会触发 CSS 来显示工具提示。有谁知道为什么？

其实我做的是这样的：

    public static MvcHtmlString TextBoxForWithTooltip<Tmodel, TProperty>(this HtmlHelper<Tmodel> htmlHelper, Expression<Func<Tmodel, TProperty>> expression, object htmlAttributes = null, string tooltip = "")
    {
        IDictionary<string, object> attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
        if (attributes.ContainsKey("style"))
        {
            var val = attributes["style"];
            attributes["style"] = val + ";border-radius: 6px;";
        }
        else
        {
            attributes.Add("style", "border-radius: 6px;");
        }
        return MvcHtmlString.Create("<div data-tooltip='" + tooltip + "'>" + htmlHelper.TextBoxFor(expression, attributes) + "</div>");
    }

我在 DIV 中嵌入了 html 以获取工具提示。

Answer 1

这可能与 Adding a tooltip to an input box 重复，尽管在 2013 年被问到这个问题时没有确凿的答案。那里有几个解决方法。

似乎工具提示可能无法通过输入。在这种情况下，将输入包装在 <a> 中：

<a href="#" alt="Please enter username" class="tooltip">
    <input id="txtUsername" type="text" />
</a>

取自这里的更长解释

https://www.mindstick.com/Articles/1529/simple-tooltip-using-html-css

详细介绍该方法，但此处不包括输入

https://davidwalsh.name/css-attr-content-tooltips