Having trouble with custom HTML Helper, CSS, and data attributes

Question

I've written a custom helper:

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

And the CSS, which I got from [here][1]. This works great when you assign the data-tooltip to a button or an "a" or "li" element. But not to an input or TextBoxFor. I see the data-tooltip attribute in the page source but it apparently does not trigger the CSS to show the tooltip. Does anyone have an idea why?

Actually what I did was this:

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

I embedded the html within the DIV to get the tooltip.

that is because the CSS uses `:before` and `:after` pseudo-elements which do not apply to replaced elements such as `input` and `textarea` (*same goes for `img`,`select` see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element for more*) — Gabriele Petrioli, Dec 23 '16 at 13:22

score 1 · Accepted Answer · edited May 23 '17 at 10:30

This is a possible duplicate of Adding a tooltip to an input box though there was no conclusive answer back in 2013 when this question was asked There are a couple of workarounds there.

It seems that it may be that the tooltip is not possible over inputs. In which case wrap the input in an <a> as so:

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

Taken from a longer explanation here

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

with more details of the approach but excluding inputs here

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

Is it possible for the html helper to return the div tag with the text box inside it? — Dean.DePue, Dec 23 '16 at 14:33

Having trouble with custom HTML Helper, CSS, and data attributes

1 Answers1