苦労は、私はカスタムヘルパーを書いた

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

そして、私は[こちら]からもらったCSS、[1]。これは、データツールチップをボタンまたは "a"または "li"要素に割り当てるときに効果的です。しかし、入力やTextBoxForではありません。私はページソースの中にdata-tooltip属性を見ていますが、明らかにCSSを起動してツールチップを表示しません。なぜ誰かがアイデアを持っていますか？私は、ツールヒントを得るためにDIVの中にHTMLを埋め込ま

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

：

は実際に私が何をしたか、このでした。バックこの質問は、回避策のカップルがあります頼まれた2013年には決定的な答えはありませんでしたけれども

Answer 1

これはAdding a tooltip to an input boxの可能重複しています。

ツールチップは、入力上不可能であることであってもよいと思われます。その場合にはそのよう<a>に入力をラップ：

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

は、ここでのアプローチの詳細が、除く入力

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

とここ

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

長い説明から撮影