How do we do tooltips for error messages upon focusing?

[httpete]

No description provided.

[hueitan]

You can setup your error message in html

https://github.com/huei90/angular-validation/blob/master/demo/demo.js#L17 (put html here)

[hueitan]

Dear @httpete
Reopen this issue if you have other question.

[danicomas]

An example that how I can open a bootstrap tooltip on error? @huei90 I tried using

$validationProvider.setErrorHTML(function (msg) { })

but I don't know how because I don't have the element.

[danicomas]

@huei90 I want to do something like that (Example with jquery validate):

showErrors: function (errorMap, errorList) {
        this.defaultShowErrors();

        // destroy tooltips on valid elements                              
        $("." + this.settings.validClass).tooltip("destroy");
        $("." + this.settings.validClass).removeAttr("data-original-title");

        // add/update tooltips 
        for (var i = 0; i < errorList.length; i++) {
            var error = errorList[i];

            if ($("#" + error.element.id).attr("data-original-title")) {
                if (!($("#" + error.element.id).attr("data-original-title") == error.message)) {
                    $("#" + error.element.id).tooltip("destroy");
                    $("#" + error.element.id).tooltip({
                        container:body,
                        placement: "right",
                        template: '<div class="tooltip tooltip-error" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
                    }).attr("data-original-title", error.message);
                    $("#" + error.element.id).tooltip("show");
                }
            }
            else {
                $("#" + error.element.id).tooltip({
                    container: body,
                    trigger: "focus",
                    placement: "right",
                    template: '<div class="tooltip tooltip-error" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
                }).attr("data-original-title", error.message);
            }
        }
    }

[hueitan]

Hi @danicomas Try using message-id

https://github.com/huei90/angular-validation/blob/master/API.md#use-a-custom-valid-message-

[danicomas]

Look at this: http://plnkr.co/edit/0tBZlijiwmDrSWcCP7U7?p=preview

The tooltip always appears. How can I solve this? @huei90

Even so I think that the best way would be create the tooltip dynamically without add manually each element no? Is it possible extend the directive functionallity?

[hueitan]

@danicomas You are able to disable success message shown by using $validationProvider.showSuccessMessage = false;

[danicomas]

@huei90 I don't want this. I only want to show the tooltip when error appears. Could be working with this? I have access to the message on invalidCallback?:

angular.extend($validationProvider, {
    validCallback: function (element){
        $(element).parents('.form-group:first').removeClass('has-error');
        ...
    },
    invalidCallback: function (element) {
        $(element).parents('.form-group:first').addClass('has-error');
        ...
    }
});

[danicomas]

I have updated the plnkr.co: http://plnkr.co/edit/0tBZlijiwmDrSWcCP7U7?p=preview

I could do it but I think that best way is pass the message for the following callbacks: (if you want use a bootstrap tooltip dynamically)

validCallback: function (element, message){ }
invalidCallback: function (element, message) { }

[hueitan]

Great! Seems validCallback is works! Thanks for your update. 🍻

I have updated your works in Q&A section #