[FORM] Error Popups on Field Errors

[KiddoV]

Feature Request

Some time we need to save a lot of space for a form. Current error display behavior would extend the height or width of a form, that sometime make it look ugly in some cases. A form error popups would be a nice feature to have for that situation.

Example (if possible)

I currently do this in my application: *.css

/* Custom Popup on Form Error */
.ui.basic.red.pointing.prompt.label {
    position: absolute;
    visibility: hidden !important;   /* Hide to use custom error pointing label */
}
.popup.field-error, .popup.field-error:before {
    padding: 0.2em 0.4em !important;
    color: #FFFFFF !important;
    background: #e96363 !important;
}

*.js

//Custom error pop-up for form validation
$(document).on("mouseenter click", "form .field.error", (e) => {
    var popupTarget = $(e.currentTarget).find("input:not([type='file']):not([type='hidden']):not(.datetime), div.dropdown, textarea, div.image, .ui.calendar > .input");
    let errorMsg = $(e.currentTarget).find(".ui.pointing.prompt").html();
    if (errorMsg && !popupTarget.popup("exists")) {
        popupTarget.popup({
            className: {
                popup: "ui popup field-error",
            },
            duration: 100,
            position: "top center",
            variation: "mini",
            html: errorMsg,
            onHidden(el) {
                $(el).popup("destroy");
            }
        }).popup("toggle");
    }
});

This does OK in my application, although there are some unexpected behaviors.

Here is the JSFiddle Example: https://jsfiddle.net/KiddoV/1bex23zn/21/

I believed you would have a better idea/ implementation in your lib somehow.

Thanks,

[KiddoV]

This would cover my discussion long time ago: https://github.com/fomantic/Fomantic-UI/discussions/2008