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 developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element for more) — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 23, 2016 at 13:22

Community · Accepted Answer · 2017-05-23 10:30:33Z

1

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

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Dec 23, 2016 at 13:18

Vanquished Wombat

9,6037 gold badges39 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dean.DePue Over a year ago

Is it possible for the html helper to return the div tag with the text box inside it?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related