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。当您将数据工具提示分配给按钮或＆＃34; a＆＃34;或＆＃34; li＆＃34;元件。但不是输入或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

自定义HTML帮助程序，CSS和数据属性出现问题

1 个答案: