ASP.NET MVC 4でのデフォルトのポップオーバーの外観を変更するRazorまたはJqueryを使用したブートストラップ

こんにちは、ありがとうございました。私は15以上のフィールドを持つレジストリフォームを持っています。今はデータアノテーションを検証に使用していますが、うまくいきます。私が必要とするのは、ユーザーがフォーム上でマウスを動かしてすべてのフィールドが必要であることを知ったときに、実際に編集されたポップオーバーを表示する方法を見つけることです。今すぐフォームが完了しなければならず、ユーザーが必須フィールドに記入しなければ、ユーザーは送信時にプロンプトを表示します。これは、機能的でない設計戦略ではないことが分かりました。私は1つのフィールドでテストしていたポップオーバーを持っています。これは、あなたが想像しているように、これは私のすべてのフィールドがこのようなメッセージを表示するための多くのコードになるでしょう。ユーザーがフィールド上にマウスを置くと、このような表示をするINPUTフォーム上でより大きなポップオーバーをしたいのです。住所2行は必須フィールドです。また、これは非常に重要です。私は、popoverをより大きな色にして、すべてのフィールドの入力ボックスの右側に表示する必要があります。ここではスタイルASP.NET MVC 4でのデフォルトのポップオーバーの外観を変更するRazorまたはJqueryを使用したブートストラップ

<style> 
/* Tooltip */ 
.tooltip > .tooltip-inner { 
    background-color: #73AD21; 
    color: #FFFFFF; 
    border: 1px solid green; 
    padding: 15px; 
    font-size: 20px; 
} 
/* Tooltip on top */ 
.tooltip.top > .tooltip-arrow { 
    border-top: 5px solid green; 
} 
/* Tooltip on bottom */ 
.tooltip.bottom > .tooltip-arrow { 
    border-bottom: 5px solid blue; 
} 
/* Tooltip on left */ 
.tooltip.left > .tooltip-arrow { 
    border-left: 5px solid red; 
} 
/* Tooltip on right */ 
.tooltip.right > .tooltip-arrow { 
    border-right: 5px solid black; 
}

   @Html.LabelFor(model => model.Address2, htmlAttributes: new 
    { 
     @class = "control-label col-md-2", 
     data_toogle = "popover", 
     data_trigger = "hover", 
     data_container = "body", 
     data_placement = "right", 
     title = "Address2 is not mandatory" 
    })`

出典

2016-07-25 RickZler

だけ明確にする私は、各入力フォームボックスのすべてのpopoversをしたいです同じように見えるが、それらはデフォルトのCSSスタイルではなく、ポストで指定されたものともっと似ている。だから、各入力フィールドには、あなたの上にマウスを置いたときにあなたの入力フィールドが必須フィールドであると言うことができるときに、ポップオーバーがあります。だから、ユーザーは登録フォームを提出する前にフィールドが必要であることを知っている – RickZler

のための私のCSSコードは、このソリューションの美しさは、それがすべての必須フィールドのために働くだろう、と拡張メソッドで、ユーザーが指定する必要はないということです別のツールチップforeachフィールド。 jqueryとjquery-uiを必ず追加してください。この拡張メソッドを追加します。このコントローラとモデル

namespace System.Web.Mvc.Html 
{ 
    public static class Helpers 
    { 
     public static MvcHtmlString LabelWithTooltip<TModel, 
      TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression) 
     { 
      var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData); 
      string htmlFieldName = ExpressionHelper.GetExpressionText(expression); 
      string labelText = metaData.DisplayName ?? metaData.PropertyName ?? htmlFieldName.Split('.').Last(); 
      if (String.IsNullOrEmpty(labelText)) 
       return MvcHtmlString.Empty; 
      var label = new TagBuilder("label"); 
      label.Attributes.Add("for", helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName)); 
      //Credit for this method goes to https://silverhair2010.wordpress.com/2012/10/10/creating-tooltips-using-data-annotations-in-asp-net-mvc/ 
      //I modified the next line 
      //if (!string.IsNullOrEmpty(metaData.Description)) 
      if (metaData.IsRequired) 
       label.Attributes.Add("title", htmlFieldName + " is required."); 

      label.SetInnerText(labelText); 
      return MvcHtmlString.Create(label.ToString()); 
     } 
    } 
}

使用：指定された名前空間を使用し

public class SOModel 
{ 
    [Required] 
    public string Name { get; set; } 

    [Required] 
    public string Address1 { get; set; } 
} 

public class HomeController : Controller 
{ 
    public ActionResult PPIndex() 
    { 
     return View(new SOModel()); 
    }

これはあなたのビューになります。

@{ 
    Layout = null; 
} 
@model Testy2.Controllers.SOModel 
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Tooltip - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      $(document).tooltip(); 
     }); 
</script> 
<style> 
     label 
     { 
      display: inline-block; 
      width: 5em; 
     } 
    /*I got styling ideas from http://stackoverflow.com/questions/4780759/overriding-css-styles-of-the-jquery-ui-tooltip-widget*/ 
    .ui-tooltip { 
     display: none; 
     background: black; 
     font-size: 12px; 
     height: 10px; 
     padding: 10px; 
     color: #fff; 
     z-index: 99; 
     bottom: 10px; 
     border: 2px solid white; 
     /* for IE */ 
     filter: alpha(opacity=80); 
     /* CSS3 standard */ 
     opacity: 0.8; 
    } 
    </style> 
</head> 
<body> 
    @Html.LabelWithTooltip(model => model.Address1) 
</body> 
</html>

出典

2016-07-26 23:33:30 kblau

ねえ、ありがとう。私は明日これを試すのを待つことができません。だから私はラムダ式Html.LabelWithTooltip（model => model.Address1とmodel.addrees1をフィールドに変更すると、私はビューの右側をチェックしているので、ツールチップとしてマークされたすべてのフィールドで動作します） – RickZler

Kblau：ありがとうデフォルトのツールチップやポップオーバーの外観は変更されていません。.ui-tooltipをSite.cssファイルに配置する必要がありますか？また、Html.TextBoxヘルパーメソッド内でも同様に動作します。 – RickZler

ASP.NET MVC 4でのデフォルトのポップオーバーの外観を変更するRazorまたはJqueryを使用したブートストラップ

答えて

関連する問題