locked
required error tooltip style RRS feed

  • Question

  • User818337214 posted

    Hi,

    how can I get css  code for 'required error tooltip style' 

    I mean this picture tooltip 'Please fill in this field'.

    Also 

    I need to set this error message for language - localization 

    Sunday, July 28, 2019 10:09 PM

Answers

  • User818337214 posted

    I feel it is unreasonable to ask the community to search for a solution unless you are willing to share your fee. 

    I cant understand you what you mean? my English is not good. what did you mean? fee? I hate capitalism. property is theft. if you believe a god, you have such a belief. Don't worry  I don't believe it... :) 

    my solution : I changed it that jQuery Validation Bootstrap Tooltip 

    placement: "bottom" || e.placement,

    this is about tooltip position in my template 

    <style>
    
    .tooltip .arrow {
    left: 5% !important;
    }
    .tooltip {
    left: -2% !important;
    }
    .tooltip-inner {
    background-color: #0da9ef !important;
    width: 200px !important;
    left: -2% !important;
    color: white !important;
    text-align: left;
    }
    .tooltip .arrow:before {
    border-bottom-color: #0da9ef !important;
    margin-bottom: -1px;
    }
    
    </style>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 29, 2019 7:11 PM

All replies

  • User-1038772411 posted

    Hello, suat_suphi

    You can not change "default tooltip" (HTML5 validation bubble) - it is determinated by browser vendor and several other params like browser language.

    Do something like below :

    <input placeholder="Lorem ipsum..." required oninvalid="myCustomFunction()" />
    

    Reference link :

    https://stackoverflow.com/questions/38930221/styling-default-validation-tooltip

    Thanks

    Monday, July 29, 2019 5:08 AM
  • User711641945 posted

    Hi suat_suphi,

    If you use asp.net core and want to localize the error message.I suggest that you could add [Required] attribute on server to show the error message like below instead of using Html5 Built-in form validation:

    1.Model:

     public class Test
    {
    [Required] public string FullName { get; set; }
    }

    2.View:

    @model Test
    <form asp-action="Create"> <div class="form-group"> <label asp-for="FullName" class="control-label"></label> <input asp-for="FullName" class="form-control" /> <span asp-validation-for="FullName" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Create" class="btn btn-default" /> </div> </form> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} }

    And you could localize ASP.NET Core model binding error messages, follow these steps:

    1.Create Resource File: right-click solution to new folder named 'Resources' and name the resource file.

    2.Edit the .resx file: set the corresponding name and value.

    3.Configure Options in Startup.cs: configure its options to set message accessors for ModelBindingMessageProvider

    More details you could refer to ASP.NET Core Model Binding Error Messages Localization

    Best Regards,

    Rena

    Monday, July 29, 2019 6:29 AM
  • User818337214 posted

    thank you Rena Ni,


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/js/jquery-validate.bootstrap-tooltip.min.js"></script>

    I use this... I mean when I use required, I get an error message that's 'Please fill in this field'.

    If I use just required in input for email, there is a recommendation and tooltip style. I want to get this style

    Monday, July 29, 2019 8:13 AM
  • User818337214 posted

    How can I change tool tip style 

    /**
     * @preserve
     * jQuery Validation Bootstrap Tooltip extention v0.10.2
     *
     * https://github.com/Thrilleratplay/jQuery-Validation-Bootstrap-tooltip
     *
     * Copyright 2016 Tom Hiller
     * Released under the MIT license:
     * http://www.opensource.org/licenses/mit-license.php
     */
    ! function (a) {
        var b = 0,
            c = 0;
        a.extend(!0, a.validator, {
            prototype: {
                defaultShowErrors: function () {
                    var d = this,
                        e = a.fn.tooltip.Constructor.VERSION;
                    e && (e = e.split("."), b = parseInt(e[0]), c = parseInt(e[1])), a.each(this.errorList, function (e, f) {
                        if (3 === b && c >= 3) {
                            var g = a(f.element);
                            void 0 !== g.data("bs.tooltip") ? g.data("bs.tooltip").options.title = f.message : g.tooltip(d.applyTooltipOptions(f.element, f.message)), a(f.element).removeClass(d.settings.validClass).addClass(d.settings.errorClass).tooltip("show");
                        } else a(f.element).removeClass(d.settings.validClass).addClass(d.settings.errorClass).tooltip(4 === b ? "dispose" : "destroy").tooltip(d.applyTooltipOptions(f.element, f.message)).tooltip("show");
                        d.settings.highlight && d.settings.highlight.call(d, f.element, d.settings.errorClass, d.settings.validClass);
                    }), a.each(d.validElements(), function (c, e) {
                        a(e).removeClass(d.settings.errorClass).addClass(d.settings.validClass).tooltip(4 === b ? "dispose" : "destroy"), d.settings.unhighlight && d.settings.unhighlight.call(d, e, d.settings.errorClass, d.settings.validClass);
                    });
                },
                applyTooltipOptions: function (c, d) {
                    var e;
                    e = 4 === b ? a.fn.tooltip.Constructor.Default : 3 === b ? a.fn.tooltip.Constructor.DEFAULTS : a.fn.tooltip.defaults;
                    var f = {
                        animation: a(c).data("animation") || e.animation,
                        html: a(c).data("html") || e.html,
                        placement: a(c).data("placement") || e.placement,
                        selector: a(c).data("selector") || e.selector,
                        title: a(c).attr("title") || d,
                        trigger: a.trim("manual " + (a(c).data("trigger") || "")),
                        delay: a(c).data("delay") || e.delay,
                        container: a(c).data("container") || e.container
                    };
                    return this.settings.tooltip_options && this.settings.tooltip_options[c.name] && a.extend(f, this.settings.tooltip_options[c.name]), this.settings.tooltip_options && this.settings.tooltip_options._all_ && a.extend(f, this.settings.tooltip_options._all_), f;
                }
            }
        });
    }(jQuery);

    Monday, July 29, 2019 10:36 AM
  • User475983607 posted

    How can I change tool tip style 

    You are showing an HTML 5 form validation message.  Use HTML 5 form validation if that's what you want.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

    Monday, July 29, 2019 10:51 AM
  • User818337214 posted

    mgebhard


    suat_suphi

    How can I change tool tip style 

    You are showing an HTML 5 form validation message.  Use HTML 5 form validation if that's what you want.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

    thank you mgebhard

    <div class="form-group input-group">
        <input asp-for="Input.Email" class="form-control" type="email" required placeholder="@Html.DisplayNameFor(model => model.Input.Email)">
        <span class="input-group-addon"><i class="icon-mail"></i></span>
        @*<span asp-validation-for="Input.Email" class="text-danger"></span>*@
    </div>

    if I use just required, I can see HTML 5 form validation message 

            public class InputModel
            {
                [Required(ErrorMessage = "EmailRequiredError")]
                [EmailAddress(ErrorMessage = "EmailFormatError")]
                [Display(Name = "Email")]
                public string Email { get; set; }
    
                [Required(ErrorMessage = "PasswordRequiredError")]
                [DataType(DataType.Password)]
                [Display(Name = "Password")]
                public string Password { get; set; }
    
                [Display(Name = "LoginRememberMe")]
                public bool RememberMe { get; set; }
            }

    How to show my error message in HTML 5 form validation message automatically.

    I mean [Required(ErrorMessage = "EmailRequiredError")]  and [EmailAddress(ErrorMessage = "EmailFormatError")]

    or 

    how to convert this code (thats I shared - jQuery Validation Bootstrap Tooltip extention v0.10.2) with html 5 form validation tooltip 

    Monday, July 29, 2019 11:12 AM
  • User475983607 posted

    How to show my error message in HTML 5 form validation message automatically.
    I mean [Required(ErrorMessage = "EmailRequiredError")]  and [EmailAddress(ErrorMessage = "EmailFormatError")]
    or 
    how to convert this code (thats I shared - jQuery Validation Bootstrap Tooltip extention v0.10.2) with html 5 form validation tooltip 

    First, decide on a validation framework; jQuery validation or HTML 5.  

    Secondly, it helps to read the linked documentation.  

    Monday, July 29, 2019 11:35 AM
  • User818337214 posted

    thank you again

    I guess I need to get html5 validation tooltip css style 

    I just want to use this tooltip style 

    Monday, July 29, 2019 11:46 AM
  • User475983607 posted

    I guess I need to get html5 validation tooltip css style 

    I just want to use this tooltip style 

    HTML 5 validation is a browser API and each browser can implement the UI a bit differently.   This information is openly and clearly published in the link I provided in my first post. 

    If you want the UI that chrome provides, then I recommend you do a Google search for a style that fits your needs.  I feel it is unreasonable to ask the community to search for a solution unless you are willing to share your fee.

    Monday, July 29, 2019 11:58 AM
  • User818337214 posted

    I feel it is unreasonable to ask the community to search for a solution unless you are willing to share your fee. 

    I cant understand you what you mean? my English is not good. what did you mean? fee? I hate capitalism. property is theft. if you believe a god, you have such a belief. Don't worry  I don't believe it... :) 

    my solution : I changed it that jQuery Validation Bootstrap Tooltip 

    placement: "bottom" || e.placement,

    this is about tooltip position in my template 

    <style>
    
    .tooltip .arrow {
    left: 5% !important;
    }
    .tooltip {
    left: -2% !important;
    }
    .tooltip-inner {
    background-color: #0da9ef !important;
    width: 200px !important;
    left: -2% !important;
    color: white !important;
    text-align: left;
    }
    .tooltip .arrow:before {
    border-bottom-color: #0da9ef !important;
    margin-bottom: -1px;
    }
    
    </style>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 29, 2019 7:11 PM