Haben Sie Probleme mit benutzerdefinierten HTML-Helper, CSS und Datenattribute

Question

ich einen benutzerdefinierten Helfer geschrieben haben:

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

Und die CSS, die ich von [hier] bekam [1]. Dies funktioniert hervorragend, wenn Sie den Daten-Tooltip einer Schaltfläche oder einem "a" - oder "li" -Element zuweisen. Aber nicht zu einer Eingabe oder TextBoxFor. Ich sehe das Data-Tooltip-Attribut in der Seitenquelle, aber es löst anscheinend nicht aus, dass der CSS den Tooltip anzeigt. Hat jemand eine Idee warum?

Eigentlich, was ich tat, war dies:

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

ich die html innerhalb des DIV eingebettet, um den Tooltip zu bekommen.

Answer 1

Dies ist ein mögliches Duplikat von Adding a tooltip to an input box, obwohl es 2013 keine schlüssige Antwort gab, als diese Frage gestellt wurde. Es gibt ein paar Problemumgehungen dort.

Es scheint, dass der Tooltip möglicherweise nicht über Eingaben möglich ist. In diesem Fall wickeln Sie die Eingabe in einem <a> als so:

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

von einer längeren Erklärung Genommen hier

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

mit mehr Einzelheiten des Ansatzes, aber ohne Eingänge hier

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