Changing the default popover look in ASP.NET MVC 4 Bootstrap using Razor or Jquery

Question

Hi Thanks for the help in advance. I have a registry form that has over 15 fields. Right now I'm using Data Annotations for validation and it's working well. What I need is to find a way to actually display an edited popover when the user mousses over the form so they know all fields are required. Right now the form has to completed and if they don't fill out a required field the user gets prompt at submit time. This is turning out to be none functional and bad design strategy. I have a popover I was testing on one field. Here is the As you might imagine this would be a lot of code for all my fields to display a message like this. I want to have a bigger popover ON THE INPUT form that would display something like this if the user mouses over the field. Adress Line 2 is a required field. Also and this is very important I need to get the popover to be bigger a different color and show up on the right off the input box for all fields. Here is my CSS code for styles

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

Just to be clear I want all popovers for each input form box to look the same but they will not be the default CSS style but be more like the one specified in the post. So each input field will have a popover when you mouse over it will say what ever field your in is a required field. So the user knows that field is required before submitting the registration form — RickZler, Jul 25 '16 at 19:34

score 0 · Answer 1 · answered Jul 26 '16 at 23:33

The beauty of this solution is that it will work for all your required fields, and with the extension method, you don't have to specify a different tooltip foreach field. Make sure you add jquery and jquery-ui. Add this extension method. Use the specified namespace:

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

Use this controller and Model:

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

This will be your view:

@{
    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>

Hey thanks so much. I can't wait to try this tomorrow. So I just use the lambda expression Html.LabelWithTooltip(model => model.Address1 and change model.addrees1 to the field I'm checking in the view right. So it will operate on all fields marked as tooltips — RickZler, Jul 27 '16 at 01:50
Kblau: Thanks but this isn't changing the default tooltip or popover look. Do I have to put the .ui-tooltip in the Site.css file. Also will this work within Html.TextBox helper methods. Please advise thank you — RickZler, Jul 27 '16 at 19:05

Changing the default popover look in ASP.NET MVC 4 Bootstrap using Razor or Jquery

1 Answers1